Question

我正面临着ng-class的问题。

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

＆＃13;

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");

  };

});

＆＃13;

.red {
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 1

这里没什么不寻常的。单击时，可能会触发模型中的更改，因此angular会触发摘要周期。

由于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+，你可以使用::进行一次绑定

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

2 个答案: