Verwenden von ng-Klasse mit einem Funktionsaufruf - mehrmals aufgerufen

Question

Ich verwende Ionic und möchte die Hintergrundfarbe jedes Elements in einem <ion-list> basierend auf den Daten dynamisch ändern. Ich dachte ich, das von einem Funktionsaufruf durch täte die richtige Klasse

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

Dies ist der Controller derzeit

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

    }]) 

Auf die Überprüfung der Konsole zurückzukehren, die getBackgroundColour() Funktion aufgerufen wird 7 Zeiten für jede <ion-item> in der Liste. Warum ist das, und sollte ich vermeiden, einen Funktionsaufruf in ng-class zu verwenden?

Answer 1

AngularJS arbeitet mit dirty checking: es braucht jedem Zyklus die Funktion aufgerufen werden um sicher zu sein, dass es keinen neuen Wert zurückgibt und dass die DOM muss nicht aktualisiert werden.

Es ist Teil des typischen Prozesses des Frameworks, und eine Funktion so einfach wie Ihre sollte keine negativen Auswirkungen auf die Leistung haben. Lesbarkeit und Testbarkeit Ihres Codes ist hier viel wichtiger, also behalten Sie die Logik in Ihrem Controller.

Eine einfache Dinge zu tun, aber einfach ist die Erklärung von colourMap zu bewegen, die eine Konstante ist, außerhalb Ihrer Funktion:

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

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

Answer 2

Ihr Weg ist in Ordnung, solange Ihre Liste nicht eine riesige Größe ist. Wenn Sie angle 1.3 verwenden und die Anzahl der Aufrufe verringern möchten, können Sie Ihre ng-Klasse in ng-class = ":: getBackgroundColour (singleCase)" ändern. Dies gilt einmal verbindlich. Sobald der Wert stabil ist, wird er nicht erneut überprüft. Dies würde höchstwahrscheinlich zwei Aufrufe pro Artikel bedeuten.