web-dev-qa-db-fra.com

Utilisation de ng-class avec un appel de fonction - appelé plusieurs fois

J'utilise Ionic et je veux changer dynamiquement la couleur d'arrière-plan de chaque élément dans un <ion-list> En fonction des données. J'ai pensé que je ferais cela au moyen d'une fonction appeler pour retourner la bonne classe

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

C'est le contrôleur actuellement

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

  }])

Lors de la vérification de la console, la fonction getBackgroundColour() est appelée 7 fois pour chaque <ion-item> Dans la liste. Pourquoi cela et devrais-je éviter d'utiliser un appel de fonction dans ng-class?

angularjsionic-framework
18
drjimmie1976

AngularJS fonctionne avec vérification incorrecte : il doit appeler la fonction à chaque cycle pour être sûr qu'il ne renvoie pas de nouveau et que le DOM n'a pas besoin d'être mis à jour.

Cela fait partie du processus typique du framework, et appeler une fonction aussi simple que la vôtre ne devrait avoir aucun impact négatif sur les performances . La lisibilité et la testabilité de votre code sont beaucoup plus importantes ici, alors gardez la logique dans votre contrôleur.

Une chose simple à faire, cependant, consiste simplement à déplacer la déclaration de colourMap, qui est une constante, en dehors de votre fonction:

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

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

Votre chemin est bien tant que votre liste n'est pas d'une taille énorme. Cela étant dit, si vous utilisez angular 1.3 et que vous souhaitez réduire le nombre d'appels, vous pouvez changer votre classe ng en ng-class = ":: getBackgroundColour (singleCase)". Cela s'applique une fois une liaison donc une fois que la valeur est stable, elle ne revérifiera pas. Cela signifierait très probablement deux appels par article.

8
Jason