带有 Angular 指令的 TreeView

Question

我对 Angular 比较陌生，所以请原谅我的错误，如果有的话。我必须从NgModules 修改和使用这个treeview 指令。它的代码看起来很有希望，但我必须对其进行一些修改以添加添加/删除或修改项目的功能。

Plunker

我以前使用 jQuery 来创建我的树形视图并完成了所有相关任务。但既然我决定转向 Angular，我必须以 Angular 的方式来做。

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

Plunker

我曾尝试在 ng-repeat 中使用 :: 表示法进行一次绑定。这有很大帮助，但现在我无法实现我的添加或更新方法。有什么办法可以做到吗？

<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 让您可以选择首先显示折叠的节点数组。