यह फ़ंक्शन दो बार निष्पादित क्यों किया जाता है?

Question

मुझे एक वृक्ष संरचना मिली है। JSBIN here

नियंत्रक

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

कारखाने सही स्थिति खोजने और नोड जोड़ने में निर्देश

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

में

।

मौजूदा बच्चों के साथ नोड्स में एक बच्चा जोड़ने के दौरान यह दो बच्चों को जोड़ रहा है और मुझे समझ में नहीं आता क्यों।

धन्यवाद।

संपादित मैं has_children खो सकते हैं और यह अभी भी

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

संपादित 2 functin ही परिणाम

updated JSBIN

सदस्य लिंक का उत्पादन droped रूप में अच्छी तरह छोरों के लिए - सिर्फ संदर्भों का आदान-प्रदान, कुछ भी नहीं छोड़ा गया लेकिन एक कार्य ई है दो बार सताया!

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