[英]Can't access form values in a $modalInstance
I'm opening a $modalInstance
in which user has to choose an option from radio inputs (values loaded dynamically) and return chosen value. 我正在打开一个$modalInstance
,其中用户必须从单选输入(动态加载的值)中选择一个选项并返回所选值。
I have this function to open the $modalInstance
: 我有此功能来打开$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: 然后是$modalInstance
控制器:
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: 这是addFriendGroupModal.html
,是模式本身的HTML:
<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
. 我似乎无法在$scope.addFriend
检索此值。 The value of $scope.chosenFriend
stays at null
and does not get updated when selecting a radio option. $scope.chosenFriend
的值保持为null
,并且在选择单选选项时不会更新。
What am I doing wrong? 我究竟做错了什么?
$modal.open
returns promise so try : $modal.open
返回保证,所以请尝试:
var addFriendGroupModal;
$modal.open({ ...})
.result.then(function(response){
addFriendGroupModal = response;
});
<input type="radio" id="friend{{thisFriend.id}}" name="chosenFriend" ng-model="$parent.chosenFriend" ng-value="thisFriend" /> {{thisFriend.name}} {{thisFriend.surname}}
in here your ng-model
is $parent.chosenFriend
so, why are you expecting $scope.chosenFriend
to not be a null? 在这里,您的ng-model
是$parent.chosenFriend
所以,为什么要期望$scope.chosenFriend
不为null? change you ng-model property to $scope.chosenFriend
. 将您的ng-model属性更改为$scope.chosenFriend
。
Retrieved answer from a related question , by gertas 检索到的相关问题的答案 ,作者: 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. Angular-UI模态使用插入包含模态内容,这意味着在模态内创建的所有新作用域条目都在子范围内创建。 This happens with form directive. 这是通过form指令发生的。
This is known issue: https://github.com/angular-ui/bootstrap/issues/969 这是已知问题: https : //github.com/angular-ui/bootstrap/issues/969
I proposed the quick workaround which works for me, with Angular 1.2.16: 我提出了适用于我的Angular 1.2.16的快速解决方法:
<form name="$parent.userForm">
The
userForm
is created and available in modal's controller$scope
.userForm
已创建并在模态的控制器$scope
可用。 Thanks to scope inheritanceuserForm
access stays untouched in the markup. 由于作用域继承,userForm
访问在标记中保持不变。<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
. 因此,在我的表单中,我必须将name="$parent.friendForm"
属性设置为<form>
,然后将单选按钮模型绑定到它, ng-model="friendForm.chosenFriend"
才能读取它从$scope.friendForm.chosenFriend
的模态范围中$scope.friendForm.chosenFriend
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.