输入无线电ng-model没有更新
Input radio ng-model not updated after all
我试图解决一个谜题,为什么输入[无线电]控件的ng模型没有像我期望的那样设置。当页面加载时,所有无线电都被正确启动。单击不同的控件会改变radioVal变量——它的值会在页面中呈现。
问题在于它看起来只发生在DOM中。当我调试代码时,$scope.radioVal
总是相同的…modalDialog
的隔离作用域不包含radioVal
属性。
在哪个范围内创建无线电ng-model
?这是一个不同的例子吗?
工作代码可以在jsfiddle上找到。
我的html代码是:
<div ng-app = "app">
<div ng-controller="mainCtrl">
<a ng-click="showModalDlg()">Click me</a>
<br/><br/>
<modal-dialog show="showModal" action="actionFun">
<form>
<input type="radio" ng-model="radioVal" value="1">One<br/>
<input type="radio" ng-model="radioVal" value="nothing changes me">Two<br/>
<input type="radio" ng-model="radioVal" value="3">Three<br/>
<br/><br/>
The model changes in the DOM as expected: <b>radioVal = {{radioVal | json}}</b>
<br/>
but by pressing the Action button you can see that the model has not been modified.
</form>
<a class="button" action>Action</a>
</modal-dialog>
</div>
</div>
我的angular代码:
angular.module('common', [])
.controller('mainCtrl', ['$scope', function($scope){
$scope.showModal = false;
$scope.radioVal = "nothing changes me";
$scope.showModalDlg = function() {
$scope.showModal = !$scope.showModal;
};
$scope.actionFun = function() {
console.log('actionFun ...' + $scope.radioVal);
};
}]).directive('modalDialog',
function () {
return {
restrict: 'E',
scope: {
show: '=',
action: '&',
},
replace: true,
transclude: true,
link: function (scope, element, attrs) {
scope.hideModal = function () {
scope.show = false;
scope.$apply();
};
$('a[hide]', element).on('click', function(){
scope.hideModal();
});
$('a[action]', element).on('click', function(){
console.log('There is no radioVal in isolated scope either ... ' + scope.radioVal);
scope.action()();
scope.hideModal();
});
},
template: '<div class=''ng-modal'' ng-show=''show''><div class=''ng-modal-overlay''></div><div class=''ng-modal-dialog'' ng-style=''dialogStyle''><div class=''ng-modal-dialog-content'' ng-transclude></div></div></div>'
}
});
angular.module('app', ['common'])
总是把。在 ng-model
你正在尝试传递一个原语到一个嵌套的作用域,这会破坏双向绑定。如果你传递一个对象,它将保持对原始对象的引用
简单修改:
$scope.radioVal = "nothing changes me";
:
$scope.myModel={radioVal : "nothing changes me"};
和使用ng-model
<input ng-model="myModel.radioVal">
更改继承,从而更改绑定。
演示当你在指令中声明scope
对象时,这意味着你为该指令的每个实例创建了一个隔离的作用域。您需要将radioVal
传递给使用该指令创建的隔离(子)作用域。HTML:
<modal-dialog show="showModal" action="actionFun" value="radioVal">
JS:
scope: {
show: '=',
action: '&',
radioVal: '='
},
相关文章:
- AngularJS:ng-model 绑定在使用 jQuery 更改时不会更新
- 使用 ID 更新文本区域值,而不是在 AngularJs 中使用 ng-model
- NG-model 在输入文本后不再更新
- AngularJS更新ng-model的值以设置默认值
- Ng-model没有在ng-include上更新
- 当jquery属性选中复选框时,Angular ng-model不更新
- 输入无线电ng-model没有更新
- Ng-model在嵌套指令中没有更新
- Ng-model没有正确更新
- Select不会自动更新使用ng-repeat呈现的ng-model更改
- Data-ng-model没有使用data-ng-if更新
- Ng-model不更新控制器中的值
- 为什么ng-model不更新控制器值select
- 当我更改选择选项时,ng-model不更新
- Ng-model在select中的选择更改时没有得到更新
- 如何更新angularjs的模型(使用ng-model-options参数)
- 如何更新k-ng-model(也就是和ng-model一样的双向绑定)
- Angularjs.NG-Model 未在日期选择器中更新
- 当输入被聚焦时,没有ng-model更新
- 使用ng-model以编程方式更新文本