AngularJS指令 - 重新运行示波器参数更改的链接函数

Question

我有一个指令，它构建了一组代表文件夹结构的嵌套<ul>元素。我用的链接功能来创建新的DOM元素，并将它们添加到指令实例元素：<ul>树内

function link(scope, iElement, iAttr) { 
    var rootElement = buildChildElement(scope.tree); 
    iElement.append(rootElement); 
} 

元素是有线与调用住房指令的控制器功能jQueryUI的的拖/放互动根据拖放事件来更新范围参数。

我希望<ul>树在scope参数发生变化时自动更新。我已经尝试了手表的功能我的链接函数中：

scope.$watch('tree', function(newTree, oldTree) { 
    var newRoot = buildChildElement(newTree); 
    iElement.contents().remove(); 
    iElement.append(newRoot); 
} 

此作品在一定程度上，而是调用remove()火灾关闭$watch()方法，它结束了恢复我的控制器改变第二次。如果我注释掉remove()，我可以看到写了一个新的<ul>树，它正确地反映了对Controller中所做参数的更改。

双重射击$watch()让我觉得我正在讨论这个错误。没有它，我的参数正在更新，但我的<ul>不会更新（被删除的元素保留在它被删除的地方）。

什么是正确的方法来确保您的指令刷新其中一个范围参数的更改？

我应该使用compile函数并根据属性数组构建<ul>树而不是使用link函数吗？

Answer 1

你的方法非常的jQuery风格。我想你会发现你在这种情况下对付Angular。他/她的问题是正确的;你应该发布一个演示或其他东西，或至少一些示例代码，以便你可以有一个有效的答案。

我想你想做一个递归树指令。 Check out this SO answer对此有一些有趣的方法。主要想法是手表是不必要的。只需更改对象，Angular就会处理剩下的事情。最有效的方法是直接更改特定的节点对象，而不是替换整个对象，但这也能起作用。

Answer 2

scope.$watch('tree', function(newTree, oldTree) { 
    var newRoot = buildChildElement(newTree); 
    iElement.contents().remove(); 
    iElement.append(newRoot); 
},**true**) 

我觉得你可以试试，并引用表API的更多信息 这里是另一个ARTICAL http://www.bennadel.com/blog/2566-scope-watch-vs-watchcollection-in-angularjs.htm