Bir işlev çağrısı kullanarak ng-sınıfını kullanma - birden çok kez çağrılan

Question

Ben İyonik kullanıyorum ve verilere dayanarak bir <ion-list> öğesindeki her öğenin arka plan rengini dinamik olarak değiştirmek istiyorum. Ben Bu konsol denetimini mevcut

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

    }]) 

de denetleyici olan

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

doğru sınıf dönmek için bir işlev çağrısı yoluyla bunu düşündüm, getBackgroundColour() işlevi 7 çağrıldığını Listede her bir <ion-item> için zaman. Neden bu ve ng-class numaralı telefondan bir işlev çağrısı kullanmam gerekir?

Answer 1

angularjs dirty checking çalışır: o yeni bir değer dönmez o ve DOM güncellenmesine gerek olmadığından emin olmak için fonksiyonunu her döngüsü aramak gerekir.

Bu, çerçevenin tipik işleminin bir parçasıdır ve sizinki gibi bir işlevi çağırmak, herhangi bir olumsuz performans etkisi olmamalıdır. Kodunuzun okunabilirliği ve test edilebilirliği burada çok daha önemlidir, bu nedenle kontrol cihazınızdaki mantığı koruyun. gidip bu konuda okumak zorunda kalacak,

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

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

Answer 2

Listeniz büyük boyutta olmadığı sürece yolunuz gayet iyi. Açısal 1.3 kullanıyorsanız ve çağrı sayısını azaltmak istiyorsanız, ng-class'ınızı ng-class = ":: getBackgroundColour (singleCase)" olarak değiştirebilirsiniz. Bu, bir zaman bağlaması için geçerlidir, bu yüzden değer bir kez kararlı olduğunda, bir daha kontrol etmeyecektir. Bu, büyük olasılıkla her bir öğe için iki çağrı anlamına gelir.