javascript - Angular ngModel 绑定(bind)在 $scope 的一级方法上

Question

这不完全是一些代码的问题，但更多的是我的理解。因此，如果这在这里不合适，请原谅我..

我正在玩一个分配了 ngModel 的简单复选框:

<input type="checkbox" ng-model="someFlag"/>

我希望这会将复选框的 bool 值绑定(bind)到 $scope.someFlag(如果 Controller 和其他所有配置正确)。是的，它确实有效。但有时我发现这是行不通的。案例:当我尝试在 someFlag 更改时执行某些操作(例如在 $watch 中)时，该值并未真正绑定(bind)。

但是后来我遇到了一位同事曾经提到的事情:

Use a wrapper object

现在这样做没有任何问题:

<input type="checkbox" ng-model="wrapperObject.someFlag"/>

观察 $scope.wrapperObject.someFlag 按预期工作。

现在的问题是:为什么？？

Answer 1

当执行 ngModel 指令时，它会读取属性的 ng-model 值(在本例中为 "someFlag")并将其保存在它是局部函数作用域(不要与 Angulars $scope 混淆)。但是由于 javascript 中的 boolean 是基本类型，您不能通过引用传递它，只能通过值传递。这意味着只有 $scope.someFlag 的值(true 或 false)被复制到 ngModel，并且不是从 ngModel 访问和修改 $scope.someFlag 的方式。

当你使用 wrapper 对象时，它是通过引用传递的，这意味着，它在 $scope.wrapperObject 和 ngModel 的局部函数范围内是一样的，因为它在幕后指向相同的内存地址。

我不确定这是否足够解释，但是当使用 Angular 原始值时，您必须记住按引用传递和按值传递之间的区别，以及当原始值发生变化时，应用程序的其他部分可能不知道这一点.