javascript - angularjs ng-class 方法被多次调用

Question

在这个例子中，我有 2 个 ng-class，每个调用不同的控制器方法，由于某种原因，每个方法被调用 3 次，知道吗？可能的错误？

var navList = angular.module('navList', []);

navList.controller('navCtrl', ['$scope', '$location', function ($scope, $location) {
    $scope.firstClass = function () {
        console.log('firstClass');
        return 'label label-success' ;
    };     
    $scope.secondClass = function () {
        console.log('secondClass');
        return 'label' ;
    };     

}]);

http://jsfiddle.net/uDPHL/72/

谢谢

Answer 1

这不是一个错误。当 Angular 编译类似的东西时ng-class="firstClass()"，它会为它设置一个 $watch。摘要循环可能会多次评估每个 $watch ：

Angular 进入 $digest 循环。该循环由两个较小的循环组成，它们处理 $evalAsync 队列和 $watch 列表。$digest 循环不断迭代，直到模型稳定，这意味着 $evalAsync 队列为空，$watch 列表没有检测到任何变化。--概述文档

还

在观察者注册到作用域后，监听器 fn 被异步调用（通过 $evalAsync）来初始化观察者。在极少数情况下，这是不可取的，因为当 watchExpression 的结果没有改变时调用了侦听器。-- $watch 文档

因此，预计至少有两次。