Почему эта функция выполняется дважды?

Question

У меня есть древовидная структура. JSBIN here

в директиве

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

в контроллере

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

Завод найти правильное положение и добавление узла.

При добавлении ребенка в узлы с существующими детьми он добавляет двух детей, и я не понимаю, почему.

Спасибо.

EDIT я могу потерять has_children и она по-прежнему дает тот же результат, связь

updated JSBIN

Член 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 падает на порядок для петель, а также - просто обмениваясь ссылками, ничего не оставалось, кроме функции e вырезано дважды!

updated JSBIN

Answer 1

Вы собираете весь элемент (включая часть добавленной шаблоне директивы, который уже был составлен):

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

Поскольку обработчик щелчка мышью в шаблон компиляции шаблон второй раз приводит к добавлению второго набора обработчиков кликов (между прочим).

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

Исправление: Вместо этого используйте это, чтобы скомпилировать только новый элемент, который вы добавили:

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

updated jsbin