我刚刚在 Angular 表达式中发现了这个有趣的明显不一致:
- 可以在表达式中执行赋值
- 如果赋值涉及来自 ngRepeat 的局部变量,这将中断
- 这可以通过使用 Controller 中定义的 setter 而不是表达式中的赋值来克服
docs on expressions似乎只是明确禁止表达式中的控制流,我没有看到任何提及上述行为的类型。
我想由此得出的结论是,无论如何使用 setter 可能是一种更好的设计模式,但是有没有人知道关于表达式中可能的内容的更明确的引用?
如果 Angular 单方面禁止在其中赋值,也许会更好。 (一个相关的不一致是,似乎可以在表达式中递增 i = i+1 而不是 i+=1...)
最佳答案
这是指令范围界定的一个已知问题。您可以阅读文章 The Nuances of Scope Prototypal Inheritance了解更多关于 scoping
的信息在 Angular js 中。
任何来自子作用域/嵌入作用域的原始值赋值都将创建一个新的实例值,而不是更改父作用域的值
在您的情况下,您使用的是原始值 selectedNumber
.
有两种建议的修复方法
解决方案 1
使用对象而不是原始值。
- 将 selectedNumber 更改为对象
scope.selectedNumber = { num : 1 };
- 将显示更改为
<h2>{{ selectedNumber.num }}</h2>
- 更改
ng-repeat
中的点击处理程序至ng-click="selectedNumber.num = number"
演示:Plunker
方案二:
使用 $parent
范围引用
- 更改
ng-repeat
中的点击处理程序至ng-click="$parent.selectedNumber = number"
演示:Plunker
方案三:
在父作用域中使用 setter
- 在父作用域中创建一个 setter 方法,如
$scope.setSelectedNumber = function(num){ $scope.selectedNumber = num}
- 将点击事件改为
setSelectedNumber(number)
(这是已经用过的方法)
更新:
正如 Anders Ekdahl 所建议的,建议使用基于对象(解决方案 1)的解决方案。
关于javascript - 为什么赋值在 Angular 表达式中并不总是有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15037743/