将 ng-class 与函数调用一起使用 - 多次调用

Question

我正在使用 Ionic，并希望根据数据动态更改 <ion-list> 中每个项目的背景颜色。我想我会通过函数调用来返回正确的类来做到这一点

<ion-list>
  <ion-item ng-repeat="singleCase in allCases" ng-class="getBackgroundColour(singleCase)" class="item-avatar">
    <h2>{{singleCase.date}}</h2>
    <p>{{singleCase.caseType}}</p>
  </ion-item>
</ion-list>

这是目前的控制器

  .controller('AllCasesCtrl', ['$scope', '$log', 'dummyData', function($scope, $log, dummyData) {
    $scope.allCases = dummyData.cases;

    $scope.getBackgroundColour = function(singleCase){

      $log.log("getBackgroundColour called...singleCase type: " + singleCase.speciality);

      var colourMap = {
        speciality1: "speciality1Class",
        speciality2: "speciality2Class",
        speciality3: "speciality3Class"
      };

      return colourMap[singleCase.speciality];
    };

  }])

在检查控制台时，列表中的每个 <ion-item> 都会调用 getBackgroundColour() 函数 7 次。为什么会这样，我应该避免在ng-class 中使用函数调用吗？

Answer 1

AngularJS 与dirty checking 一起工作：它需要调用函数每个周期 以确保它不会返回新值并且不需要更新 DOM。

这是框架典型过程的一部分，调用像您这样简单的函数不应对性能产生任何负面影响。代码的可读性和可测试性在这里更为重要，因此请将逻辑保留在控制器中。

然而，要做的一件简单的事情就是将colourMap 的声明（它是一个常量）移到您的函数之外：

var colourMap = {
    speciality1: "speciality1Class",
    speciality2: "speciality2Class",
    speciality3: "speciality3Class",
};

$scope.getBackgroundColour = function(singleCase) {
  return colourMap[singleCase.speciality];
};

Answer 2

只要您的列表不是很大，您的方式就可以了。话虽如此，如果您使用 angular 1.3 并且想要减少调用次数，您可以将 ng-class 更改为 ng-class="::getBackgroundColour(singleCase)"。这适用于一次绑定，因此一旦值稳定，它将不会再次检查。这很可能意味着每个项目有两次调用。