在控制器中未定义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.open({ ...而不是引用控制器？虽然我更喜欢在自己的文件和范围中使用sendInvitationController。

谢谢你的帮助！

编辑

我们发现了几件有助于我们解决问题的方法，可能会帮助某人回答问题本身：

1. 该$scope.invitation对象在中不是未定义的，sendInvitationController但是保存了正确的数据，而$scope.invitationForm仍未定义。
2. 在send-invitation.html中，我们可以$scope.invitationForm.$invalid在此处访问并进行验证：<button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>

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

Answer 1

我有同样的问题，可以通过在模态控制器的范围内定义表单对象来解决。为了使您的代码正常工作，例如，将其放置$scope.form = {};在控制器的开头，并将form标签更改为<form name="form.invitation">。之后$scope.form.invitation.$invalid应填写。