javascript - 为什么我的 Angular.js Controller 在以下代码中执行了两次它的功能？

Question

我有一个 ng-repeat 循环遍历属于 SomeController 的对象数组:

<div ng-controller="SomeController as aCtrl">
  <div ng-repeat="category in aCtrl.categories">
    <p ng-show="aCtrl.checkShouldBeDisplayed(category)">{{category.name}}</p>
  </div>
</div>

Controller 定义为:

app.controller('SomeController', function() {

this.categories = [{
  "name": "one",
}, {
  "name": "two",
}, {
  "name": "three",
}, {
  "name": "four",
}];

this.counter = 0;

this.checkShouldBeDisplayed = function(channel) {
  this.counter = this.counter + 1;
  console.log("executing checkShouldBeDisplayed " + this.counter);
  return true;
};

}); 

我希望 checkShouldBeDisplayed 函数计数为 4，因为 SomeController.categories 数组中有四个元素。相反，它计数为 8 - 在这里查看:http://plnkr.co/edit/dyvM49kLLTGof9O92jGb (您需要在浏览器中查看控制台以查看日志)。我怎样才能避免这种行为？干杯!

Answer 1

这是预料之中的；指令 ng-repeat 将重复框架认为正确的次数；这称为脏检查，您可以在 this post 中阅读更多相关信息。 .

因此，最好以声明方式思考而不是命令式思考。换句话说，方法 checkShouldBeDisplayed 应该只做它在 jar 头上所说的，而不依赖于它被调用的次数。如果您需要执行某种聚合或操作，则应在 Controller 的其他位置完成。