2013-12-10 60 views
7

我有一个树形结构。 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); 
}; 

工厂找到正确的位置和加入的节点。

当添加一个孩子到有现有孩子的节点时,它添加了两个孩子,我不明白为什么。

感谢。

编辑 我可以失去has_children,它仍然产生相同的结果

updated JSBIN

会员链接载体作用

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 DROP掉的for循环,以及 - 只是交换引用,除了函数e,执行两次!

updated JSBIN

+0

这是没有答案,但在 “add_children_element()”你正在调用“scope.has_children = true;”和“add_task()”。 检查你是否没有在你的DataFactory中重复这个错误,并尝试记录(console.log)代码的确切含​​义。 – Neozaru

+0

我相信你想在第一个函数体内使用'this',而不是'scope' –

+0

@Mark Reed--你能解释一下吗? '这个'而不是什么? – haki

回答

3

你正在编译整个元素(包括指令的模板,它已被编译增加的部分):

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

+0

现在看起来很明显!谢啦。非常赞赏。 – haki

+1

我正在盯着这个jsbin,试图弄清楚发生了什么。 +1。 – ivarni