Question

此处显示的问题是： http://jsfiddle.net/ews7S/

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

当一个元素绑定到控制器作用域中的模型，并且您还将指令添加到具有它自己的局部作用域的元素时，对模型的更改仅在指令范围内更改。

Answer 1

另一种解决方案是使用模型的对象而不是基元。然后新的指令范围将继承（原型）对象的引用，而不是原始值的副本：

$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。

Answer 2

解决方案是将其添加到指令：

scope: {testModel: '=ngModel'},

见这里： http://jsfiddle.net/ews7S/1/

为什么这样做是因为'='设置了本地范围属性和父范围属性之间的双向绑定（请参阅指令定义对象下的docs：http://docs.angularjs.org/guide/directive）。

AngularJS：如果element具有ngModel且具有本地范围的指令，则双向数据绑定将失败

2 个答案: