Question

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

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

<ul>树中的元素与jQueryUI的拖放交互连接，这些交互调用Controller上的函数，该函数包含指令以基于拖动和放大更新范围参数。放弃事件。

我希望<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。 sh0ber对他/她的问题是正确的;你应该发布一个演示或其他东西，或至少一些示例代码，这样你就可以有一个有效的答案。

我认为你想制作一个递归树指令。 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以获取更多信息这是另一个艺术品 http://www.bennadel.com/blog/2566-scope-watch-vs-watchcollection-in-angularjs.htm

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

2 个答案: