javascript - 为什么赋值在 Angular 表达式中并不总是有效？

Question

我刚刚在 Angular 表达式中发现了这个有趣的明显不一致:

1. 可以在表达式中执行赋值
2. 如果赋值涉及来自 ngRepeat 的局部变量，这将中断
3. 这可以通过使用 Controller 中定义的 setter 而不是表达式中的赋值来克服

See Plunker

docs on expressions似乎只是明确禁止表达式中的控制流，我没有看到任何提及上述行为的类型。

我想由此得出的结论是，无论如何使用 setter 可能是一种更好的设计模式，但是有没有人知道关于表达式中可能的内容的更明确的引用？

如果 Angular 单方面禁止在其中赋值，也许会更好。 (一个相关的不一致是，似乎可以在表达式中递增 i = i+1 而不是 i+=1...)

Answer 1

这是指令范围界定的一个已知问题。您可以阅读文章 The Nuances of Scope Prototypal Inheritance了解更多关于 scoping 的信息在 Angular js 中。

任何来自子作用域/嵌入作用域的原始值赋值都将创建一个新的实例值，而不是更改父作用域的值

在您的情况下，您使用的是原始值 selectedNumber .

有两种建议的修复方法

解决方案 1
使用对象而不是原始值。

1. 将 selectedNumber 更改为对象 scope.selectedNumber = { num : 1 };
2. 将显示更改为 <h2>{{ selectedNumber.num }}</h2>
3. 更改 ng-repeat 中的点击处理程序至 ng-click="selectedNumber.num = number"

演示:Plunker

方案二:
使用 $parent范围引用

1. 更改 ng-repeat 中的点击处理程序至 ng-click="$parent.selectedNumber = number"

演示:Plunker

方案三:
在父作用域中使用 setter

1. 在父作用域中创建一个 setter 方法，如 $scope.setSelectedNumber = function(num){ $scope.selectedNumber = num}
2. 将点击事件改为setSelectedNumber(number)(这是已经用过的方法)

更新:
正如 Anders Ekdahl 所建议的，建议使用基于对象(解决方案 1)的解决方案。