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>

然后include看起来像这样

<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上的每个节点进行计数,以确定节点是否有子节点,因此我可以显示其中一个孩子是否有自己的孩子,但当然你可以更有效地跟踪数据库,如果你有控制权(我想我会自己更新我的模型).

请注意,我已实现它,以便在打开和关闭然后打开时,它实际上会重新加载节点.当然,您不必这样做,但它使我免于必须实现重新加载/刷新按钮,并且它不像用户打算一遍又一遍地打开/关闭树,因为他们没有更好的事情要做.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!