javascript - AngularJS 模态对话框表单对象在 Controller 中未定义

Question

我们有一个页面可以打开一个带有如下表单的模态对话框。然而，当我们点击应该处理表单操作的 Controller 时，表单对象是未定义的，我是一个 Angular 新手，无法理解为什么......

这是父页面 Controller ，其中包含打开模态对话框的功能:

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>

应该处理邀请的 Controller 在其他地方:

  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...

    };
  }]);

那么将表单范围放入 Controller 的正确方法是什么？

也许我需要注入(inject) $modal进入sendInvitationController并添加 sendInvitation功能吗？但是当我这样做时， Action 永远不会进入 Controller 。或者我是否必须将处理提交操作的函数添加到 $modal.open({ ...而不是引用 Controller ？尽管我更愿意将 sendInvitationController 放在它自己的文件和范围内。

感谢您的帮助!

编辑

我们发现了几件事可以帮助我们构建解决方法，并可能帮助某人自己回答问题:

1. $scope.invitation sendInvitationController 中 undefined object 但拥有正确的数据，而$scope.invitationForm仍未定义。
2. 在 send-invitation.html 中我们可以访问 $scope.invitationForm.$invalid并在那里进行验证:<button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>

所以问题是:为什么 invitationForm 的绑定(bind)反对 $scope表单模型正确绑定(bind)时提交失败？

Answer 1

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