Pourquoi cette fonction est-elle exécutée deux fois?

J'ai une structure arborescente. JSBIN ici

Dans la directive

scope.add_child_task = function() { scope.add_task(scope.path,"child of " + scope.member.name); if (!scope.has_children) { scope.add_children_element(); scope.has_children = true; } }; 

Dans le contrôleur

 $scope.add_task = function(to,name) { DataFactory.add_task(to,name); }; 

L'usine trouve la position correcte et ajoute le nœud.

Lors de l'ajout d'un enfant aux noeuds avec les enfants existants, il ajoute deux enfants et je ne comprends pas pourquoi.

Merci.

EDIT Je peux perdre has_children et il produit toujours le même résultat

JSBIN mis à jour

Lien de membre functin

 link: function (scope, element, attrs) { element.append("<collection></collection>"); $compile(element.contents())(scope); scope.get_path = function() { var temp = scope.$parent.get_path(); temp.push(scope.member.name); return temp; }; scope.path = scope.get_path(); scope.add_child_task = function() { scope.add_task(scope.path,"child of " + scope.member.name); }; } 

EDIT 2 Droped the for loops aussi bien – juste échanger des références, il ne reste plus qu'une fonction exécutée deux fois!

JSBIN mis à jour

Vous compilez l'élément entier (y compris la partie ajoutée par le modèle de la directive, qui a déjà été compilé):

 element.append("<collection></collection>"); $compile(element.contents())(scope); 

Étant donné que votre gestionnaire de clics est dans le modèle de compilation du modèle, une deuxième fois entraîne l' ajout d' un deuxième ensemble de gestionnaires de clics (entre autres).

 template: "<li>{{member.name}}" + " <i>{{path}}</i> <a href ng-click='add_child_task()'>Add Child</a></li>", 

The Fix: Utilisez plutôt cela pour compiler uniquement le nouvel élément que vous avez ajouté:

 newe = angular.element("<collection></collection>"); element.append(newe); $compile(newe)(scope); 

Mise à jour de jsbin