AngularJS 复选框奇怪的行为
-
21-12-2019 - |
题
我和一些朋友正在做一个项目。这是我使用 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 解决了问题,但我不明白为什么会解决问题......首先是什么导致了这个问题?
解决方案
我尝试了你在小提琴中所做的事情,它对我来说效果很好。
http://jsfiddle.net/nicolasmoise/X9KYU/1/
事实上,当您使用它时,它对您有用 $parent
让我认为父控制器在这里有问题。也许你有两个同名的变量?
附::请记住,在 Javascript 中,基元是按值传递的,对象是按引用传递的。这是 Angular 开发人员犯很多错误的原因。请参阅这个小提琴,我在其中说明了我的观点。
其他提示
除非你很确定一切都生活在同一范围内,这几乎从未如此,你应该始终在你的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演示的详细信息。
不隶属于 StackOverflow