- 首页
- 前端开发
- 无法访问 $modalInstance 中的表单值
无法访问 $modalInstance 中的表单值
[英] Can't access form values in a $modalInstance
本文介绍了无法访问 $modalInstance 中的表单值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在打开一个 $modalInstance，其中用户必须从无线电输入(动态加载的值)中选择一个选项并返回所选值.
我有这个函数可以打开$modalInstance:
$scope.openAddFriendGroup = function () {var addFriendGroupModal = $modal.open({templateUrl: "addFriendGroupModal.html",控制器:ModalAddFriendGroupCtrl，解决: {我的详细信息:函数(){返回 $scope.info;}}});};
然后这是 $modalInstance 控制器:
var ModalAddFriendGroupCtrl = function ($scope, $modalInstance, myDetails, groupsSvc) {$scope.addableFriends = [];$scope.chosenFriend = null;//这里有一个函数在 $modalInstance 加载时检索 $scope.addableFriends 的值$scope.addFriend = 函数 () {$scope.recording = true;groupsSvc.addFriend($scope.chosenFriend, myDetails).then(function (response) {if(response.status && response.status == 200) {$modalInstance.close($scope.userid);}}, 函数(错误){$modalInstance.dismiss(err);});};};
这是addFriendGroupModal.html，模态本身的HTML:
<div class="modal-header"><h3 class="modal-title">添加好友</h3>
<div class="modal-body"><form class="form" role="form" ng-hide="loading"><div class="form-group"><label class="control-label">朋友:</label><div class="radio" ng-repeat="thisFriend in addableFriends"><标签><input type="radio" id="friend{{thisFriend.id}}" name="chosenFriend" ng-model="$parent.chosenFriend" ng-value="thisFriend"/>{{thisFriend.name}} {{thisFriend.surname}}
</表单>
<div class="modal-footer"><button class="btn btn-primary" ng-click="addFriend()">添加好友</button>
现在，当我尝试检索模式中表单的单选按钮中选择的值时，问题就出现了.我似乎无法在 $scope.addFriend 中检索此值.$scope.chosenFriend 的值保持在 null 并且在选择单选选项时不会更新.
我做错了什么?
解决方案
Retrieved 来自相关问题的答案，作者 <强>格塔斯
<块引用>
Angular-UI 模态使用嵌入来附加模态内容，这意味着在模态中创建的任何新范围条目都在子范围中创建.这发生在表单指令中.
这是已知问题:https://github.com/angular-ui/引导程序/问题/969
我提出了对我有用的快速解决方法，Angular 1.2.16:
userForm 在模态控制器 $scope 中创建并可用.感谢范围继承 userForm 访问在标记中保持不变.
<div ng-class="{'has-error': userForm.email.$invalid}"}>
因此，在我的表单中，我必须将 name="$parent.friendForm" 属性设置为 ng-model="friendForm.chosenFriend" 能够从 $scope.friendForm.chosenFriend 的模态范围读取它.
I'm opening a $modalInstance in which user has to choose an option from radio inputs (values loaded dynamically) and return chosen value.
I have this function to open the $modalInstance:
$scope.openAddFriendGroup = function () {
var addFriendGroupModal = $modal.open({
templateUrl: "addFriendGroupModal.html",
controller: ModalAddFriendGroupCtrl,
resolve: {
myDetails: function () {
return $scope.info;
}
}
});
};
Then this is the $modalInstance controller:
var ModalAddFriendGroupCtrl = function ($scope, $modalInstance, myDetails, groupsSvc) {
$scope.addableFriends = [];
$scope.chosenFriend = null;
//here goes a function to retrieve value of $scope.addableFriends upon $modalInstance load
$scope.addFriend = function () {
$scope.recording = true;
groupsSvc.addFriend($scope.chosenFriend, myDetails).then(function (response) {
if(response.status && response.status == 200) {
$modalInstance.close($scope.userid);
}
}, function (err) {
$modalInstance.dismiss(err);
});
};
};
And this is addFriendGroupModal.html, the HTML for the modal itself:
<div id="add-friend-group-modal">
<div class="modal-header">
<h3 class="modal-title">Add friend</h3>
</div>
<div class="modal-body">
<form class="form" role="form" ng-hide="loading">
<div class="form-group">
<label class="control-label">Friend:</label>
<div class="radio" ng-repeat="thisFriend in addableFriends">
<label>
<input type="radio" id="friend{{thisFriend.id}}" name="chosenFriend" ng-model="$parent.chosenFriend" ng-value="thisFriend" /> {{thisFriend.name}} {{thisFriend.surname}}
</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="addFriend()">Add friend</button>
</div>
</div>
Now, the problem comes when I try to retrieve the value that has been selected in the radio buttons of the form in the modal. I can't seem to retrieve this value in $scope.addFriend. The value of $scope.chosenFriend stays at null and does not get updated when selecting a radio option.
What am I doing wrong?
解决方案
Retrieved answer from a related question, by gertas
Angular-UI modals are using transclusion to attach modal content, which means any new scope entries made within modal are created in child scope. This happens with form directive.
This is known issue: https://github.com/angular-ui/bootstrap/issues/969
I proposed the quick workaround which works for me, with Angular 1.2.16:
<form name="$parent.userForm">
The userForm is created and available in modal's controller $scope. Thanks to scope inheritance userForm access stays untouched in the markup.
<div ng-class="{'has-error': userForm.email.$invalid}"}>
So, in my form I would have to set a name="$parent.friendForm" attribute to <form>, and then bind the radio button model to it, ng-model="friendForm.chosenFriend" to be able to read it from the modal scope at $scope.friendForm.chosenFriend.
这篇关于无法访问 $modalInstance 中的表单值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
