AngularJS模态对话框的形式对象是在控制器未定义 [英] AngularJS modal dialog form object is undefined in controller

问题描述

我们必须打开中包含一个表格模式对话框的页面。然而，当我们打的应该处理表单操作的控制器，表单对象是不确定的，我是个太过角新手理解为什么...

We have a page that opens a modal dialog with a form like below. However when we hit the controller that should handle the form action, the form object is undefined and I am too much of an Angular newbie to understand why...

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

This is the parent page controller holds the function to open the 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如下：

the invitation-dialog html looks like this:

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

这应该处理的邀请控制器是别的地方：

The controller that should handle the invitation is somewhere else:

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

    };
  }]);

那么什么是获取表单范围到控制器的正确方法是什么？

So what's the correct way to get the form scope into the controller?

也许我需要注入 $模式到 sendInvitationController 并添加 sendInvitation 的功能呢？但是，当我做到这一点的动作永远不会进入控制器。还是我必须补充一点，处理提交的行动 $ modal.open（{... 而不是引用控制器功能？虽然我更preFER有sendInvitationController在其自己的文件和范围

Maybe I need to inject $modal into the sendInvitationController and add the sendInvitation function to it? But when I do that the action never enters the controller. Or do I have to add the function that handles the submit action to $modal.open({ ... instead of referencing the controller? Though I'd much prefer to have the sendInvitationController in its own file and scope.

感谢您的帮助！

修改

我们发现几件事情，帮助我们建立一个解决办法，并可能帮助别人回答这个问题本身：

We found several things that helped us build a workaround and might help someone answer the question itself:

1. 在 $ scope.invitation 对象未在 sendInvitationController 未定义的，但有正确的数据，而 $ scope.invitationForm 仍然不确定。


2. 发送 - invitation.html我们可以访问内部 $ scope.invitationForm $无效并做验证正确的有：＆LT;按钮式=按钮NG点击=sendInvitation（）NG-禁用=$ invitationForm无效。＆GT;邀请＆LT; /按钮＆GT;

1. the $scope.invitation object is not undefined in the sendInvitationController but holds the correct data, while $scope.invitationForm remains undefined.
2. inside the send-invitation.html we can access $scope.invitationForm.$invalid and do the validation right there: <button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>

所以，问题是：为什么 invitationForm 对象的 $范围的结合失败的提交而表单模型correcetly结合？

So the question is: why does the binding of the invitationForm object to the $scope fail on submit while the form model binds correcetly?

推荐答案

我有同样的问题，可以通过在模态控制的范围定义表单对象解决它。为了让您的code工作投入，例如， $ scope.form = {}; 在你的控制器的开始，你的表单标签改为＆LT;表格名称=form.invitation＆GT; 。随后 $ scope.form.invitation。$无效应填。

I had the same issue and could solve it by defining the form object in the scope of the modals controller. To get your code working put, for example, $scope.form = {}; in the beginning of your controller and change your form tag to <form name="form.invitation">. Afterwards $scope.form.invitation.$invalid should be filled.

这篇关于AngularJS模态对话框的形式对象是在控制器未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！