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

Question

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

13

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

当一个元素在控制器作用域中绑定到模型，并且您还向该元素添加具有自己本地作用域的指令时，则对模型的更改仅在指令作用域中更改。

- Atomix

AngularJS + document.getElementById，我可以问一下为什么吗？ - Liviu T.

angular.element('#out').text(scope.textModal) 是 AngularJS 的写法，但它会抛出一个错误，说“选择器未实现”。 - Atomix

至少从1.0.1版本开始，元素（id / class选择器）可用。 - Liviu T.

@Liviu，我在Atomix的fiddle中尝试了angular.element('#out')...，但它给出了“选择器未实现”的错误。也许只有在加载jQuery时才能使用。 - Mark Rajcok

啊，没错，可能是因为Angular的jQueryLite没有实现选择器。 - Liviu T.

2个回答

6

解决方案是将以下内容添加到指令中：

scope: {testModel: '=ngModel'},

请查看这里：http://jsfiddle.net/ews7S/1/ 其原理是使用'='来建立本地作用域属性和父级作用域属性之间的双向绑定关系（请参见指令定义对象下的文档：http://docs.angularjs.org/guide/directive）。

- Atomix

1

这个解决方案还创建了一个“隔离作用域”，这与原问题中的“scope：true”不同。在问题fiddle中，“scope：true”创建了一个新的作用域，该作用域从父作用域原型继承。在此解决方案fiddle中，创建了一个新的作用域，该作用域不从父作用域原型继承。如果您想要一个新作用域原型继承的解决方案，请参见我的替代答案。如果您不想要继承（通常情况下不需要），那么这就是您想要的解决方案。 - Mark Rajcok

2

ngModel 拥有比其他简单属性更多的职责。因此，你也会遇到 NgModelController 的问题。当指令被链接时，ngModel.$viewValue/$modelValue 将不是你所需要的。 - Artem Andreev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark Rajcok · Accepted Answer

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

$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 属性（对问题 fiddle 进行这些更改）:

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

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

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