AngularJS模态对话框形式对象在控制器中未定义

Question

我们有一个打开模态对话框的页面，表单如下。然而，当我们击中应该处理表单动作的控制器时，表单对象是未定义的，我是一个太多的Angular新手，无法理解为什么...

这是父页面控制器，具有打开模式对话框的功能：

app.controller('organisationStructureController', ['$scope', ..., '$modal', function ($scope, ..., $modal) {

    $scope.openInvitationDialog = function (targetOrganisationId) {
      $modal.open({
          templateUrl: 'send-invitation.html',
          controller: 'sendInvitationController',
          resolve: {$targetOrganisationId: function () {
            return targetOrganisationId;
          }
          }
        }
      );
    };

在这样的页面上：

// inside a loop over organisations
<a ng-click="openInvitationDialog({{organisation.id}})">Invite new member</a>

“邀请”对话框html如下所示：

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!-- ... -->
            </div>
            <div class="modal-body">
                <form name="invitationForm">

                    <div class="form-group">
                        <label for="email" style="color:white;">Email</label>
                        <input type="email" class="form-control"  autocomplete="off" placeholder="New member email" id="email" name="email" ng-model="invitation.email" required="true"/>
                        <span class="error animated fadeIn" ng-show="invitationForm.email.$dirty && invitationForm.email.$error.required">Please enter an email address!</span>
                        <span class="error animated fadeIn" ng-show="invitationForm.email.$error.email">Invalid email</span>
                    </div>

                    <!-- ... -->

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
                        <button type="submit" class="btn btn-primary" ng-click="sendInvitation()">Invite</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

应该处理邀请的控制器在其他地方：

  app.controller('sendInvitationController', ['$targetOrganisationId', '$scope', ...,
    function ($targetOrganisationId, $scope, ...) {

    $scope.invitation = {
      // ...
      targetOrganisation: {
        id: $targetOrganisationId
      }
    };

    $scope.sendInvitation = function () {

      // $scope.invitationForm is undefined
      if ($scope.invitationForm.$invalid) {
        return false;
      }

      // send the invitation...

    };
  }]);

那么，将表单作用域放入控制器的正确方法是什么？

也许我需要将$modal注入sendInvitationController并向其添加sendInvitation功能？但是当我这样做的时候，动作永远不会进入控制器。或者我必须将处理提交操作的函数添加到$modal。打开（{…而不是引用控制器？尽管我更喜欢将sendInvitationController放在它自己的文件和作用域中。

感谢任何帮助！

编辑

我们发现了一些有助于我们构建解决方案并可能有助于某人自己回答问题的东西：

1. $scope.invitation对象在sendInvitationController中不是未定义的，但保存正确的数据，而$scope.invitationForm保持未定义。
2. 在send-invitation.html中，我们可以访问$scope.invitationForm.

所以问题是：invitationForm对象与$scope对象的绑定为什么在提交时失败，而表单模型绑定正确？




Answer 1

“为什么”这个问题的答案是"范围"。tl； dr you使用模态对话框创建了一个新范围，该对话框向控制器隐藏了范围的表单对象。

如果我们简化您的代码，大致可以得到以下结果：

<div ng-ctrl="organizeCtrl">
  <modal-dialog>
    <form name="invitationForm">
      <input type="email" ng-model="invitation.email" placeholder="Enter email..." />
      <input type="submit" ng-click="sendInvitation()" text="Invite!" />
      <input type="button" ng-click="cancel()" text="Cancel  :(" />
    </form>
  </modal-dialog>
</div>

（这是一个非常简化的版本，应该仍然包含所有核心组件。）现在，让我们看看作用域是在哪里创建的，以及在其中注入了什么。

<div ng-ctrl="sendInvitationController">
<!-- scope created above with "invitation" and "sendInvitation" from sendInvitationController -->
  <modal-dialog>
  <!-- scope created above for the modal dialog transclude -->
    <form name="invitationForm">
    <!-- add "invitationForm" to the modal dialog's scope -->
      <input type="email" ng-model="invitation.email" placeholder="Enter email..." />
      <input type="submit" ng-click="sendInvitation()" text="Invite!" />
      <input type="button" ng-click="cancel()" text="Cancel  :(" />
    </form>
  </modal-dialog>
</div>

在这里，您可以看到在中创建了一个新的子作用域。

<div ng-ctrl="organizeCtrl">
  <modal-dialog>
    <form name="invitationForm">
      <input type="email" ng-model="invitation.email" placeholder="Enter email..." />
      <input type="submit" ng-click="sendInvitation(invitationForm)" text="Invite!" />
      <input type="button" ng-click="cancel()" text="Cancel  :(" />
    </form>
  </modal-dialog>
</div>

控制器接受邀请表单作为sendInvation函数的参数：

app.controller('sendInvitationController', ['$targetOrganisationId', '$scope', ...,
  function ($targetOrganisationId, $scope, ...) {
  $scope.invitation = {
    targetOrganisation: {
      id: $targetOrganisationId
    }
  };
  $scope.sendInvitation = function (form) {
    if (form.$invalid) {
      return false;
    }
    // send the invitation...
  };
}]);

@Robin确定了另一种解决方案，特别是在sendInvitationController的作用域中创建一个根对象，然后将表单直接附加到该对象，依靠Angular的作用域遍历机制在

希望这有助于您或其他人学习角范围。

Answer 2

2014年11月更新：从angular ui引导开始，转换范围与控制器范围合并。没有必要做任何事情。

0.12.0之前：

要将InvitationForm直接放在父控制器作用域中，您需要通过以下方式绕过被转移的作用域：

<form name="$parent.invitationForm">

以上将在父控制器中自动创建表单对象。不需要预先初始化的东西，长的对象路径或通过事件传递。一旦模式打开，只需使用$scope.invitationForm访问它。

Answer 3

我也有同样的问题，可以通过在modals控制器的范围内定义form对象来解决。要使代码正常工作，请输入，例如，$scope。形式={} 在控制器的开头，并将表单标记更改为