javascript - AngularJS 复选框奇怪的行为

Question

我和一些 friend 正在做一个项目。这是我使用 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)
}

每当我选中或取消选中该复选框时，我总是会得到true...但是，奇怪的部分是 <h1></h1> 内的内容 标签发生变化....所以，就像我在 html 层上更改变量的值，但不在 JavaScript 层上...

为什么会发生这种情况？

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

Answer 1

除非您非常确定所有内容都位于同一范围内(这几乎是不可能的)，否则您应该始终在 ng-model 表达式中的某个位置有一个点。

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" />

参见this plunker了解现场演示的详细信息。