Warum wird diese Funktion zweimal ausgeführt?

Question

Ich habe eine Baumstruktur. JSBIN here

in der Richtlinie

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

in der Steuerung

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

Die Fabrik ist die richtige Position zu finden, und das Hinzufügen des Knotens.

Beim Hinzufügen eines Kindes zu Knoten mit vorhandenen Kindern fügt es zwei Kinder hinzu und ich verstehe nicht warum.

Danke.

EDIT Ich kann has_children verlieren und es produziert immer noch das gleiche Ergebnis

updated JSBIN

Mitglied Link 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 als auch die für Schleifen - nur den Austausch von Referenzen, nichts mehr übrig als eine Funktion, die e zweimal ausgetestet!

updated JSBIN

Answer 1

Sie kompilieren das gesamte Element (einschließlich der durch die Richtlinie der Vorlage hinzugefügt Teil, die bereits kompiliert wurde):

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

Da Ihr Click-Handler ist in der Vorlage Compilierung Die Vorlage ein zweites Mal führt zu einer zweiten Gruppe von Klickhandlern (unter anderem) hinzugefügt wird.

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

Der Fix: Statt dies nur das neue Element zu kompilieren verwenden Sie hinzugefügt haben:

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

updated jsbin