我们有一个页面可以打开一个模式对话框,其中包含如下表单。然而,当我们点击应该处理表单操作的控制器时,表单对象是未定义的,而且我太过于理解为什么......
这是父页面控制器保存打开模态对话框的功能:
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
仍未定义。$scope.invitationForm.$invalid
并在那里进行验证:<button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>
所以问题是:为什么invitationForm
对象与$scope
的绑定在提交时会失败,而表单模型会严格绑定?
答案 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,
})