ng-class的函数表达式在ng-click上被调用

Question

我在ng类中遇到问题。

当我点击按钮时，单击函数被调用的可能次数（ng-repleat中元素的数量）。 JsFiddle link

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

 
myModule.controller('myCtrl', function($scope) { 
 
    $scope.num = [1, 2]; 
 
    $scope.getClass = function(a) { 
 
    console.log("class set"); 
 
    return true; 
 
    }; 
 
    $scope.clicked = function() { 
 
    console.log("clicked"); 
 

 
    }; 
 

 
});

.red { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 
    <div ng-controller="myCtrl"> 
 
    <button ng-repeat="n in num" ng-class="{'red':getClass('red')}" ng-click="clicked()">{{n}}</button> 
 

 
    </div> 
 
</div>

Answer 1

并无异常。当您点击时，您可能会触发模型中的更改，因此角度会触发摘要循环。

由于getClass函数绑定到ng-class指令，函数在摘要期间被评估。

注：你能避免ng-class是通过使用一次性结合，这是角1.3+特征重新计算：

ng-class="::{'red':getClass('red')}" 

参见fiddle

Answer 2

的功能在泛音是称为每个$digest周期并且每个触发$digest运行两次

我与触发$digest

http://jsfiddle.net/mgPGS/516/

$scope.testDigest = function(){ 
    $timeout(angular.noop) 
} 

如果你点击按钮消化每个功能将被触发虚拟功能更新你的小提琴两次，如果你使用的角度1.3+可以使用::为一次性装订