angularjs - AngularJS：如果元素具有ngModel和具有本地范围的指令，则两种方式数据绑定失败

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，父作用域和指令作用域都具有对同一个（一个）对象的引用。两者的变化都会影响同一个对象。

另一个（脆弱的）解决方案是使用未记录的$parent 属性（对问题小提琴进行这些更改）：

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

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

注意 using$parent是一个脆弱的解决方案，因为使用$parent取决于 DOM 结构。例如，如果在父级和子级（现在是孙子级）之间添加了另一个控制器（由您显式添加，或由另一个 Angular 指令隐式添加），我们将需要使用$parent.$parent.testModel.

Answer 2

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

scope: {testModel: '=ngModel'},

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

之所以可行，是因为 '=' 在本地范围属性和父范围属性之间设置了双向绑定（请参阅指令定义对象下的文档： http ://docs.angularjs.org/guide/directive）。