Question

对于某些代码，这不是一个问题，但更多的是我的理解。如果这不合适，请原谅我。

我正在玩一个简单的复选框，其中指定了ngModel：

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

我希望这会将复选框的布尔值绑定到$ scope.someFlag（如果控制器和其他所有配置都正确）。是的，它确实有效。但有时我发现这不起作用。案例：当someFlag更改时（例如在$ watch中）尝试执行某些操作时，该值并未真正绑定。

但后来，我遇到了一些工作中提到的工作：

使用包装器对象

这样做现在可以毫无问题地工作：

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

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

现在的问题是：为什么？

Answer 1

当执行ngModel指令时，它会读取属性的ng-model值（在本例中为"someFlag"）并将其保存在其本地函数范围内（不要混淆角度{{1} }}）。但由于javascript中的$scope是基元，因此不能通过引用传递它，只能通过值传递。这意味着只有boolean的值（$scope.someFlag或true）被复制到false，而不是从{{ngModel访问和修改$scope.someFlag的方式1}}。

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

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

Answer 2

看看这张取自Egghead.io的视频，您的问题已解释为here。

Answer 3

根据我的理解，如果选中复选框到控制器

，则要传递布尔值

试试这个：在你的HTML中：

<input type="checkbox" ng-model="value"
                 ng-true-value="YES" ng-false-value="NO"> <br/>

在您的控制器中：

$scope.value is gives Boolean value//

Answer 4

这是因为范围继承。关于angularjs范围和继承的好article

我猜您提到的$watch逻辑可能是从ng-repeat或ng-if内部触发的。请记住angularjs为ng-repeat和ng-if内的每个对象创建一个新的范围变量。

<input type="checkbox" ng-model="someFlag"/> //This is a primitive $scope.someFlag

<input type="checkbox" ng-model="obj.someFlag"/> //This is an object $scope.obj.someFlag

<div ng-repeat="opt in options"> 这里为opt变量创建了一个新的子范围 - $scope.somechild。因此，如果在此引用原始变量someFlag，则将其视为$scope.child.someFlag。所以此处的任何更新都不会更新父$scope.someFlag。但是如果对象继承引用了对象obj.someFlag，编译器将尝试在子代码$scope.child中找到obj.someFlag，因为它不存在它将在父$scope中搜索，因为它是目前，这将引用$scope.obj.someFlag，此处所做的任何修改都是在实际的父范围内完成的。

Answer 5

这是口头禅的一部分：＆＃34;模型中应该总是有一个点＆＃34;作者：Misko Hevery，Angular的父亲之一。您可以，也可能应该观看此视频：https://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=32m51s

ngModel是一个执行双向数据绑定的指令。绑定到基元（在本例中为布尔）将使setter将其设置在当前作用域上，而不是放在可能会干扰其他作用域的作用域上。

在您的方案中，在父作用域中，我们有$scope.someFlag = true。在子范围内，我们会输入您的信息：

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

这将最初起作用，但是一旦用户更改了值，将在子范围上创建someFlag，并且从现在开始，绑定将从该值读取和写入。

我希望这在某种程度上是明确的。

请注意，这仅适用于双向数据绑定指令，而不是ngDisabled或ngHide

等常规指令

Angular ngModel绑定在$ scope的第一级方法上

5 个答案: