angularjs ng-répétition dans la directive tourne deux fois

Question

https://plnkr.co/edit/WzLez5XElbOHRTvXEJFc?p=preview

 function DirectiveController($scope, $element) 
{ 
$scope.Array = ["a", "b"]; 
    $scope.me = function() { 
     console.log("i ran"); 
    }; 

}; 


//Directive HTML 
<div class="cool picker" ng-repeat="item in Array"> 
     <input ng-value="me()"> 
      {{item}} 
     </input> 
</div> 

Une fonction de contrôleur de directive est appelé 4 fois pendant directive fonctionne seulement 2 fois par ng de répétition. J'ai créé une version thine de mon code dans Plunker, donc des suggestions comme "se débarrasser de la portée isolée n'aideront pas".

• Je ne pouvais pas trouver une explication propre ici qui se concentre seulement sur cette question sans un gros code impliqué ou un exemple Plunker. s'il vous plaît conseiller ... please make sure ur console is set on plunker] 1

Answer 1

Ce que vous voyez est le digest cycle au travail. Le cycle de digestion est la façon dont la mise à jour automatique fonctionne - c'est la raison pour laquelle la saisie dans une boîte de saisie met automatiquement à jour tout ce qui se rapporte à sa valeur. Lorsque le cycle digest s'exécute, il redessine efficacement tout ce qui a pu être modifié sur la page. Angular utilise quelques astuces pour trouver tout ce qui aurait pu changer, et la technique principale est les observateurs. Ces observateurs sont créés automatiquement lorsque vous utilisez des directives telles que ng-if et ng-class et lorsque vous utilisez des liaisons telles que {{yourBindingHere}}. Chaque élément enregistre un watcher. Lorsque le cycle de digestion d'Angular s'exécute, chaque observateur est invité à mettre à jour son état. Dans le cas de ng-class, il relancera la fonction qui lui est liée, pour voir si quelque chose doit changer. C'est pourquoi la fonction de votre contrôleur s'exécute plusieurs fois, et elle fonctionnera de nouveau chaque fois que quelque chose change sur la page.

Maintenant que vous utilisez l'interpolation {{}}, Angular s'exécute une fois, et l'utilisation d'une fonction avec ng-value le force une autre fois. La meilleure pratique consiste à ne pas utiliser la fonction à l'intérieur de ng-repeat car elle oblige toujours le cycle à vérifier une mise à jour.

Enfin, utilisez one time binding si possible pour empêcher la création d'un observateur.