我有一个树形结构.
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,它仍然会产生相同的结果
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
同样也只是对for循环进行了调整 – 只需要交换引用,没有剩下任何东西,只是执行了两次函数！
解决方法
您正在编译整个元素(包括指令模板添加的已经编译的部分)：
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);
