Clever Geek Handbook

Angular lazy loading tree directive

We are starting a new project using angularJS :) and one of the requirements is tree management. The tree control needs to support "Lazy Loading", so we can add nodes to it dynamically as we get more data with AJAX.

I saw 2 directives below, but I don't think "Lazy Loading" is supported so before I start developing it I ask you guys :)

Two beautiful tree directives I've seen:

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

Thanks, Avi

+3


source to share


2 answers


The AngularJS IntegralUI TreeView directive supports loading on demand from either local or remote data source. You can find more information on this here: Load On Demand in TreeView for AngularJS



The demo shows how to load custom data before expanding an element by handling the beforeExpand event. This is just a load simulation. In a real scenario with data from a remote server, the code will be different. In general, you need to use the l oadData method in the ajax call ($ http service from AngularJS) to populate the TreeView.

0


source


Since AngularJS loads directives before any logic, you can't use them very well for recursive operations, otherwise you probably won't need a directive for one.

However, one very nice workaround is using ng-include, since it doesn't have the above limitation. And then the creation of the tree is extremely simple.

Where you want a tree, you have something like

    <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>

then the include looks something like this:



<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>

In the controller call vm.getChildNodes (d) you can get the children for the extended node currently. I expand the nodes and then actually asynchronously do a count for each node versus the odata to determine if the node has children, so I can show if one of the children has its own, but of course you could be more efficient track this in the database if you have control over it (I think I'll update my model myself).

Note that I have implemented it so that if you open and close and then reopen, it actually reloads the nodes. Of course, you don't have to do that, but it saves me from having to use the reload / refresh button, otherwise users won't open / close trees over and over again because they have nothing better to do.;)

An additional advantage I have is that I implement user input for some (most) nodes, for example. select them, enter a value for them. I noticed that it is more efficient if they only exist on demand in angular.

0


source






More articles:


All Articles