- 首页
- 前端开发
- AngularJS 模态对话框表单对象在控制器中未定义
AngularJS 模态对话框表单对象在控制器中未定义
[英] AngularJS modal dialog form object is undefined in controller
本文介绍了AngularJS 模态对话框表单对象在控制器中未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们有一个页面可以打开一个模态对话框，其表单如下所示.然而，当我们点击应该处理表单操作的控制器时，表单对象是未定义的，我是一个 Angular 新手，无法理解为什么...
这是父页面控制器持有打开模态对话框的功能:
app.controller('organisationStructureController', ['$scope', ..., '$modal', function ($scope, ..., $modal) {$scope.openInvitationDialog = 函数(targetOrganisationId){$modal.open({templateUrl: 'send-invitation.html',控制器:'sendInvitationController'，解析:{$targetOrganisationId:函数(){返回目标组织 ID；}}});};
在这样的页面上:
//在组织上的循环内<a ng-click="openInvitationDialog({{organisation.id}})">邀请新成员</a>
邀请对话框 html 如下所示:
<div class="modal-content"><div class="modal-header"><!-- ... -->
<div class="modal-body"><表格名称=邀请表格"><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 animationfadeIn" ng-show="invitationForm.email.$dirty &&invitationForm.email.$error.required">请输入电子邮件地址！</span><span class="错误动画淡入淡出" ng-show="invitationForm.email.$error.email">电子邮件无效</span>
<!-- ... --><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">取消</button><button type="submit" class="btn btn-primary" ng-click="sendInvitation()">邀请</button>
</表单>
应该处理邀请的控制器在其他地方:
app.controller('sendInvitationController', ['$targetOrganisationId', '$scope', ...,函数 ($targetOrganisationId, $scope, ...) {$scope.invitation = {//...目标组织:{id: $targetOrganisationId}};$scope.sendInvitation = 函数 () {//$scope.invitationForm 未定义如果($scope.invitationForm.$invalid){返回假；}//发送邀请...};}]);
那么将表单范围放入控制器的正确方法是什么?
也许我需要将 $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 对象的绑定在提交时失败，而表单模型绑定正确?
解决方案
我遇到了同样的问题，可以通过在模态控制器范围内定义表单对象来解决它.为了让您的代码正常工作，例如，将 $scope.form = {}; 放在控制器的开头并将您的表单标记更改为 <form name="form.invitation">.之后应填写$scope.form.invitation.$invalid.
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;
}
}
}
);
};
on a page like this:
// inside a loop over organisations
<a ng-click="openInvitationDialog({{organisation.id}})">Invite new member</a>
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?
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.
Thanks for any help!
EDIT
We found several things that helped us build a workaround and might help someone answer the question itself:
- the
$scope.invitation object is not undefined in the sendInvitationController but holds the correct data, while $scope.invitationForm remains undefined.
- 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>
So the question is: why does the binding of the invitationForm object to the $scope fail on submit while the form model binds correcetly?
解决方案
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屋！
