AngularJS：如果元素具有ngModel和具有本地作用域的指令,则双向

发布时间：2020-12-17 09:27:36 所属栏目：安全来源：网络整理

导读：问题出现在这里： http://jsfiddle.net/ews7S/ input type="text" ng-model="testModel" dir="123" 当一个元素绑定到控制器范围中的模型时,并且还向具有自己的本地作用域的元素添加一个指令,那么对模型的更改只会在指令范围内更改. 一个替代的解决方案是使用

问题出现在这里：
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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!