angularjs - 带有延迟加载的 Angular 树指令

Question

我们正在使用 angularJS 启动一个新项目 :) 并且要求之一是树控件。
树形控件应支持“延迟加载”，因此我们可以在使用 AJAX 获取更多数据时动态添加节点。

我看到了下面的 2 个指令，但我认为不支持“延迟加载”
所以在我开始自己开发它之前，我问你们:)

我看到的 2 个不错的树指令:

https://github.com/eu81273/angular.treeview/blob/master/angular.treeview.js
https://github.com/nickperkinslondon/angular-bootstrap-nav-tree

谢谢，阿维

Answer 1

因为 AngularJS 在任何逻辑之前加载指令，你不能很好地将它们用于递归操作，否则你可能一开始就不需要一个指令。

但是，一种非常愉快的解决方法是使用 ng-include，因为它没有上述限制。然后制作一棵树非常简单。

你想要树的地方，你有类似的东西

    <ul class="tree-container">
        <li style="margin: 5px; list-style: none;" ng-repeat="d in vm.features" ng-include="'tree_item_renderer.html'"></li>
    </ul>

那么包含看起来像这样

<script type="text/ng-template" id="tree_item_renderer.html">
    <span ng-click="d.expand = !d.expand;vm.getChildNodes(d)" ng-show="!d.expand && d.hasChildren"><i class="fa fa-fw fa-plus-circle"></i></span>
    <span ng-show="d.expand && d.hasChildren" ng-click="d.expand = !d.expand;d.children=null" ><i class="fa fa-fw fa-minus-circle"></i></span> 
    <span ng-show="!d.hasChildren" style="margin-left:28px"></span>

    <ul>
        <li style="list-style:none;" ng-repeat="d in d.children" ng-model="d" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

在 Controller vm.getChildNodes(d) 调用中，您可以获得当前扩展节点的子节点。我展开节点，然后实际上通过 odata 对每个节点进行异步计数以确定节点是否有子节点，因此我可以显示其中一个子节点是否有自己的子节点，但当然你可以更有效地在数据库，如果你可以控制它(我想我会自己更新我的模型)。

请注意，我已经实现了它，因此如果您打开和关闭再打开，它实际上会重新加载节点。当然，您不必这样做，但它使我不必执行重新加载/刷新按钮，否则用户不会一遍又一遍地打开/关闭树，因为他们无事可做。 ;)

我的附加优势是我为某些(大多数)节点实现了用户输入，例如选择它们，为它们输入一个值。我注意到，如果这些仅以 angular 形式“按需”存在，效率会更高。