ng-classの関数式がng-clickで呼び出される

Question

ng-classの問題に直面しています。

ボタンをクリックすると、関数が呼び出される回数が増えます（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="::{'red':getClass('red')}" 

があるfiddle

Answer 2

機能をパーシャルに参照してください：あなたはng-classが角1.3以降の機能です結合一回、を使用して再計算されるのを避けることができ各$digestサイクルで呼び出され、それぞれトリガーされる$digestが2回実行されます

私はあなたがダイジェストボタンをクリックした場合、あなたがのために::を使用することができます1.3以降の角度を使用する場合、すべての機能が、二回トリガされます$digest

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

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

をトリガーダミー関数を使ってバイオリンを更新しましたワンタイムバインディング