【发布时间】：2013-10-19 05:26:21
【问题描述】：
我们有一个页面，它打开一个带有如下表单的模式对话框。然而，当我们点击应该处理表单动作的控制器时，表单对象是未定义的，我是一个 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 放在自己的文件和范围中。
感谢您的帮助！
编辑
我们发现了一些有助于我们构建解决方法并可能帮助某人回答问题本身的东西：
-
$scope.invitation对象在sendInvitationController中未定义，但包含正确的数据，而$scope.invitationForm仍未定义。 - 在 send-invitation.html 中，我们可以访问
$scope.invitationForm.$invalid并在那里进行验证：<button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>
所以问题是：为什么invitationForm 对象与$scope 的绑定在提交时失败，而表单模型正确绑定？
【问题讨论】：
-
我有类似的问题 - 问题是 $modal 在以这种方式创建模式时创建了两个范围 - 一个用于模式窗口目的，另一个是你的。尝试将点放在您的 ng-form 表达式中 - $scope.data = {} 然后 ng-form="data.invitationForm"
-
为什么不使用
$dialog和 optbackdropClick: false,。 -
感谢您的回答。 @4avanger：如果有两个不同的范围，为什么添加一些点符号会有所帮助？我试过了，但它只是导致数据未定义而不是邀请表。 @Maxim：我们正在使用 $modal。不知道$dialog是什么，可能是一样的吧？
backdropCLick: false是做什么的？ -
@Pete 你能把你的代码（实际上，重现问题所需的一小部分）放在plnkr.co 中。我知道您的问题是什么，并且我在您的代码 sn-p 中看到了其他几个问题，但是如果没有实时代码示例，这有点难以解释。
-
从来没有用过 plunkr，但我可以试试。如果你能在周一回来看看就好了，因为我将在不到一个小时的时间内下班，因为接下来的周末很忙，但我不会不认为我会在那个时候让我的代码在 plunkr 上运行..
标签： javascript forms angularjs modal-dialog