AngularJS 复选框奇怪的行为

Question

我和一些朋友正在做一个项目。这是我使用 AngularJS 的第二个项目，目前使用的是 1.2.3 版本。

尽管如此，我有时会发现它的一些行为很奇怪，并且不明白为什么会发生某些事情。

那么情况是这样的...我的 cshtml 文件中有以下内容：

<div class="checkbox">
    <label>
         <input name="somecheckbox" type="checkbox" ng-click="click()" ng-model="displayRegardlessOfSomething" />
         <label>Display regardless of something</label>
    </label>
</div>

<h1>{{displayRegardlessOfSomething}}</h1>

在我的 javascript 文件中，指令中有以下代码：

一开始：

$scope.displayRegardlessOfSomething = true;

我有以下内容：

$scope.click = function () {
    console.log($scope.displayRegardlessOfSomething)
}

每当我选中或取消选中复选框时，我总是会得到 真的...然而，奇怪的是，里面的内容 <h1></h1> 标签改变....所以，就像我在 html 层上更改变量的值，但不在 JavaScript 层上......

为什么会发生这种情况？

我已经通过使用 $parent.displayRegardlessOfSomething 解决了问题，但我不明白为什么会解决问题......首先是什么导致了这个问题？

Answer 1

我尝试了你在小提琴中所做的事情，它对我来说效果很好。

http://jsfiddle.net/nicolasmoise/X9KYU/1/

事实上，当您使用它时，它对您有用 $parent 让我认为父控制器在这里有问题。也许你有两个同名的变量？

附：:请记住，在 Javascript 中，基元是按值传递的，对象是按引用传递的。这是 Angular 开发人员犯很多错误的原因。请参阅这个小提琴，我在其中说明了我的观点。

与原语： http://jsfiddle.net/nicolasmoise/X9KYU/

与对象： http://jsfiddle.net/nicolasmoise/X9KYU/2/

Answer 2

除非你很确定一切都生活在同一范围内，这几乎从未如此，你应该始终在你的NG模型表达式中有一个圆点。

myApp.controller('MyController2', function($scope) {

  $scope.model = { displayRegardlessOfSomething: true };

  $scope.click = function() {
    console.log($scope.model.displayRegardlessOfSomething);
  };
});

<input type="checkbox" 
       ng-click="click()" 
       ng-model="model.displayRegardlessOfSomething" />

.

看这个plunker 有关Live演示的详细信息。