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

这里没有异常。当您点击时，您可能会触发模型中的更改，因此 Angular 会触发摘要循环。

由于 getClass 函数绑定(bind)到 ng-class 指令，因此在摘要期间对该函数进行求值。

注意:您可以通过使用 一次性 绑定(bind)来避免重新计算 ng-class，这是一个 angular 1.3+ 特性:

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

参见 fiddle