具有延迟加载的角树指令答案

【问题标题】：Angular Tree Directive with Lazy Loading具有延迟加载的角树指令
【发布时间】：2016-02-17 02:09:36
【问题描述】：

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

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

我看到的两个不错的树指令：

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

谢谢，阿维

【问题讨论】：

标签： angularjs tree lazy-loading

【解决方案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>

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

请注意，我已经实现了它，因此如果您打开并关闭然后再打开，它实际上会重新加载节点。当然，您不必这样做，但它使我不必实现重新加载/刷新按钮，而且用户不会一遍又一遍地打开/关闭树，因为他们没有更好的事情可做。 ;)

我的另一个优势是我为一些（大多数）节点实现了用户输入，例如选择它们，为它们输入一个值。我注意到如果这些仅以角度“按需”存在，效率会更高。

【讨论】：