4

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

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

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

我希望<ul>树在范围参数发生更改时自动更新。我在链接功能中尝试了监视功能：

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

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

双重射击$watch()让我觉得我做错了。没有它，我的参数会正确更新，但我<ul>不会更新（被删除的元素保持在被删除的位置）。

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

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

4

2 回答 2

0

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

我认为您想制作一个递归树指令。查看这个 SO answer，了解一些有趣的方法。主要思想是手表是不必要的。只需更改对象，Angular 将负责其余的工作。最有效的方法是直接更改特定节点对象而不是替换整个对象，但这也可以。

于 2013-06-04T23:59:11.463 回答
0 
scope.$watch('tree', function(newTree, oldTree) {
  var newRoot = buildChildElement(newTree);
  iElement.contents().remove();
  iElement.append(newRoot);
},**true**)

我认为您可以尝试参考 watch API 以获取更多信息这是另一篇文章 http://www.bennadel.com/blog/2566-scope-watch-vs-watchcollection-in-angularjs.htm

于 2014-10-15T07:42:18.130 回答