web-dev-qa-db-ja.com

関数呼び出しでng-classを使用する-複数回呼び出される

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_で関数呼び出しを使用しないでください。

angularjsionic-framework
18
drjimmie1976

AngularJSは dirty checking で動作します：新しい値を返さないこと、およびDOMを呼び出す必要がないことを確認するために、関数各サイクルを呼び出す必要があります。更新しました。

これは、フレームワークの典型的なプロセスの一部であり、あなたが持っているべきではないシンプルな関数を呼び出すことですパフォーマンスへの悪影響。ここではコードの可読性とテスト容易性がはるかに重要であるため、コントローラーのロジックを維持してください。

ただし、1つの簡単なことは、colourMapの宣言を移動することです。これは定数であり、関数の外部にあります。

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

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

リストが巨大なサイズでない限り、あなたの方法は問題ありません。 angular 1.3を使用していて、呼び出し回数を減らしたい場合は、ng-classをng-class = ":: getBackgroundColour（singleCase）"に変更できます。これは適用されます1回のバインドであるため、値が安定すると再びチェックされることはありません。

8
Jason