带有Angular指令的TreeView

Question

我是比较新的角度，所以请原谅我的错误，如果有。我必须修改并使用NgModules中的treeview指令。它的代码看起来很有前途，但我必须对它进行一点修改，以添加添加/删除或修改项目的功能。

Plunker

我之前使用jQuery创建我的树视图，并且已经完成了所有相关的任务。但由于我决定转到Angular，所以我必须以angular的方式来做。

据我所知，这个指令使用嵌套的递归指令来创建树，这是一种有效的方法。它工作得很好，但我会有3000-4000个项目显示在我的树视图中。因此，当我使用此代码执行此操作时，由于有许多监视表达式(每个项目5-7个)，因此它会减慢屏幕速度并消耗大量内存。

Plunker

我已经尝试了一次在ng中使用:：notation进行绑定。这很有帮助，但是现在我不能实现我的add或update方法。我有什么办法可以做到这一点吗？

<li data-ng-repeat="node in ::' + treeModel + '">

Answer 1

https://plnkr.co/edit/KwnvyslibWd1dmIXxBYU?p=preview

您已经在作用域中选择了节点，因此只需将新节点推入其子数组。

$scope.AddNode = function(NewNode)
    {
        NewNode = {"roleName" : NewNode , "roleId" : "role11", "children" : []};
      $scope.mytree.currentNode.children.push(NewNode);
    };

编辑:顾名思义，它是一次性绑定，因此添加/删除在这里不起作用。我认为浏览器在尝试一次显示如此多的数据时遇到一点卡住是很正常的。相反，您可以按位添加节点，比方说每步添加20个节点。或者你也可以看看其他的库。This one允许您选择首先显示折叠的节点数组。