ng-model在Modal内部未更新 [英] ng-model not updating inside Modal
本文介绍了ng-model在Modal内部未更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
ng-model是控制器,可以在模态内部看到.但是当我在模态内部更新数据时,$ scope变量未更新. 另外,下拉列表不起作用,我在控制器中定义了它的值. 我是否需要对指令进行更改.
ng-model which i am assigning is controller can be seen inside modal.But when i am updating the data inside the modal,the $scope variable is not updating. Also dropdown is not working whose value i have defined in my controller. Do i need to make changes in directive.
<div ng-controller="MainCtrl" class="container">
<h1>Modal example</h1>
<button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
<modal title="Login form" visible="showModal">
<div>
<select ng-model="client" ng-change="changeClient()" ng-options="item in clientList">
<label for="email">Email address</label>
<input type="text" ng-model="email" id="email" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Password" />
</div>
<button type="submit" ng-click="buttonClicked()" class="btn btn-default">Submit</button>
</modal>
</div>
控制器代码
var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function ($scope) {
$scope.email="hello@abc.com";
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
$scope.buttonClicked=function(){
alert("hello1");
alert($scope.email);
alert($scope.client);
}
$scope.clientList=["300","600","900"]
$scope.client=$scope.clientList[0];
$scope.changeClient = function() {
selectedValue=$scope.client;
alert(selectedValue);
};
});
mymodal.directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
看看- JsFiddle链接
推荐答案
您应使用:
$parent.email
<input type="text" ng-model="$parent.email" id="email" placeholder="Enter email" />
这篇关于ng-model在Modal内部未更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文