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