AngularJS:如果元素具有ngModel和具有本地作用域的指令,则双向数据绑定失败

前端之家收集整理的这篇文章主要介绍了AngularJS:如果元素具有ngModel和具有本地作用域的指令,则双向数据绑定失败前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
问题出现在这里:
http://jsfiddle.net/ews7S/
<input type="text" ng-model="testModel" dir="123">

当一个元素绑定到控制器范围中的模型时,并且还向具有自己的本地作用域的元素添加一个指令,那么对模型的更改只会在指令范围内更改.

一个替代的解决方案是使用模型的对象,而不是一个基元.然后,新的指令范围将继承(原型)对对象的引用,而不是原始值的副本:
$scope.model = { testProp: "444" };

<input type="text" ng-model="model.testProp" dir="123">
<input type="text" ng-model="model.testProp">

document.getElementById("out").innerHTML = scope.model.testProp;

http://jsfiddle.net/mrajcok/awfU5/

使用一个基元,例如$scope.testModel,指令范围的testModel属性获取父范围的testModel值的副本.改变一个不影响另一个.

对于一个对象,例如$scope.model,父范围和指令范围都有对同一个对象的引用.两者的变化都会影响同一个对象.

另一个(脆弱的)解决方案是使用undocumented $parent属性(对这个问题进行这些更改):

<input type="text" ng-model="$parent.testModel" dir="123">

document.getElementById("out").innerHTML = scope.$parent.testModel;

请注意,使用$parent是一个脆弱的解决方案,因为$parent的使用取决于DOM结构.例如,如果在父项和子节点(现在是孙子节点)之间添加了另一个控制器(由您显式地或由其他Angular指令隐含地添加),那么我们需要使用$parent.$parent.testModel.

原文链接:https://www.f2er.com/angularjs/140635.html

猜你在找的Angularjs相关文章