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

时间:2013-10-11 07:48:10

标签: javascript forms angularjs modal-dialog

我们有一个页面可以打开一个模式对话框,其中包含如下表单。然而,当我们点击应该处理表单操作的控制器时,表单对象是未定义的,而且我太过于理解为什么......

这是父页面控制器保存打开模态对话框的功能:

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>
  3. 所以问题是:为什么invitationForm对象与$scope的绑定在提交时会失败,而表单模型会严格绑定?

4 个答案:

答案 0 :(得分:77)

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

答案 1 :(得分:39)

2014年11月更新:从angular-ui-bootstrap 0.12.0转换范围开始,与控制器的范围合并。没有必要做任何事情。

0.12.0之前

要将invitationForm直接放在父控制器范围内,您需要以这种方式绕过转换范围:

<form name="$parent.invitationForm">

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

答案 2 :(得分:19)

“为什么?”这个问题的答案。是“范围”。 tl; dr 您使用模态对话框创建了一个新范围,该对话框隐藏了控制器中范围的表单对象。

如果我们简化您的代码,我们大致得到以下内容:

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

在这里,您可以看到在<modal-dialog>元素和处创建了一个新的子范围,是实际添加invitationForm对象的位置。这就是为什么你无法在sendInvitationController中看到对象,但你可以在ng-disabled的按钮上看到它。如果您希望能够访问<modal-dialog>元素之外的表单构造(例如在sendInvitationController中),则需要在函数调用中传递该构造:

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

控制器接受邀请表作为sendInvitation功能的参数:

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的范围遍历机制来查找form <modal-dialog>之外的范围上的对象,并将表单对象附加到该对象。请注意,如果您未在$scope.form = {}中指定sendInvitationController,则Angular会在form的范围内为<modal-dialog>创建一个新对象,但您仍然不会能够在sendInvitationController

中访问它

希望这可以帮助您或其他人了解Angular范围。

答案 3 :(得分:0)

$mdDialog.show({
                locals: {alert:"display meassage"},
                controller: DialogController,
                templateUrl: 'views/dialog.html',
                parent: angular.element(document.body),
                clickOutsideToClose:true,
                backdrop: true,
                keyboard: true,
                backdropClick: true,

            })