Tại sao chức năng này được thực hiện hai lần?

Question

Tôi có cấu trúc cây. JSBIN here

trong chỉ thị

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

trong bộ điều khiển

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

Nhà máy là tìm đúng vị trí và bổ sung thêm các nút.

Khi thêm trẻ vào các nút có con hiện tại, việc thêm hai trẻ em và tôi không hiểu tại sao.

Cảm ơn.

EDIT tôi có thể mất has_children và nó vẫn tạo ra kết quả tương tự liên kết

updated JSBIN

Member 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 đã đánh rơi cho vòng cũng - chỉ trao đổi tài liệu tham khảo, không có gì còn lại nhưng chức năng là e xé hai lần!

updated JSBIN

Answer 1

Bạn đang biên soạn toàn bộ phần tử (bao gồm cả phần bổ sung bởi mẫu của chỉ thị, mà đã được biên soạn):

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

Kể từ handler nhấp chuột của bạn là trong mẫu biên dịch mẫu lần thứ hai dẫn đến tập hợp các trình xử lý nhấp chuột thứ hai (trong số các thứ khác) đang được thêm vào.

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

Cách khắc phục: Thay vì sử dụng để biên dịch chỉ các yếu tố mới mà bạn đã thêm:

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

updated jsbin