我们有一个页面打开一个模态对话框,其形式如下。但是,当我们点击应该处理表单动作的控制器时,表单对象是未定义的,并且我太过喜欢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。
$modal
sendInvitationController
sendInvitation
$modal.open({ ...
谢谢你的帮助!
编辑
我们发现了几件有助于我们解决问题的方法,可能会帮助某人回答问题本身:
$scope.invitation
$scope.invitationForm
$scope.invitationForm.$invalid
<button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>
所以问题是:为什么在表单模型正确绑定的同时将invitationForm对象绑定到$scope提交失败?
invitationForm
$scope
我有同样的问题,可以通过在模态控制器的范围内定义表单对象来解决。为了使您的代码正常工作,例如,将其放置$scope.form = {};在控制器的开头,并将form标签更改为<form name="form.invitation">。之后$scope.form.invitation.$invalid应填写。
$scope.form = {};
<form name="form.invitation">
$scope.form.invitation.$invalid