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

  .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];
    };

  }])

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

Answer 1

AngularJS 可与 dirty checking 配合使用:它需要每个周期调用函数以确保它不会返回新值并且不需要更新 DOM。

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

但是，要做的一个简单的事情就是将 colourMap 的声明(它是一个常量)移到函数之外:

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

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