我们有一个页面，它打开一个带有如下表单的模式对话框。然而，当我们点击应该处理表单动作的控制器时，表单对象是未定义的，我是一个 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提交失败？