一尘不染

在控制器中未定义AngularJS模态对话框表单对象

angularjs

我们有一个页面打开一个模态对话框,其形式如下。但是,当我们点击应该处理表单动作的控制器时,表单对象是未定义的,并且我太过喜欢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提交失败?


阅读 215

收藏
2020-07-04

共1个答案

一尘不染

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

2020-07-04