javascript - AngularJS 指令 - 在范围参数更改时重新运行链接功能

Question

我有一个构建一组嵌套 <ul> 的指令代表文件夹结构的元素。我使用链接函数创建新的 DOM 元素并将它们附加到指令实例元素:

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

<ul> 中的元素树与 jQueryUI 的拖放交互连接，该交互调用包含指令的 Controller 上的函数，以根据拖放事件更新范围参数。

我想要 <ul>范围参数发生更改时自动更新树。我在我的链接功能中尝试了一个监视功能:

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

这在一定程度上起作用，但是对 remove() 的调用触发 $watch()第二次方法最终恢复我的 Controller 更改。如果我注释掉 remove() , 我可以看到一个新的 <ul>编写的树正确反射(reflect)了 Controller 中对参数所做的更改。

双发 $watch()让我觉得我做错了。没有它，我的参数会正确更新，但我的 <ul>不更新(被丢弃的元素停留在它被丢弃的地方)。

确保您的指令在范围参数之一发生变化时刷新的正确方法是什么？

我应该使用 compile 吗？功能和构建 <ul>基于属性数组而不是使用 link 的树功能？

Answer 1

您的方法非常 jQuery 风格。我想你会发现在这种情况下你是在反对 Angular。 sh0ber 的问题是正确的；你应该发布一个演示或其他东西，或者至少一些示例代码，这样你就可以得到一个有效的答案。

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