A Set of simple directives which makes it easy to render tree structures with angular.
1 person uses it
Author: 3918606? dotJEM
Submitted by: 1609615? jeme

dotJEM Angular Tree

Small set of directives that helps to render templates based on tree's In reality calling it a tree-view is a bit missguided as rendering data like this is so incredible easy in angular.

In essense, all we really need to do is something like:

So in essense, we don't really need any custom directives or that sort...

But this doesn't entirely feel right... Why should we have to pass things through the template cache to achieve this, why can't we just provide the template directly in our html in a more natural way?...

Angular Tree Repeat

Angular Tree Repeat is another directive that solves this problem in a nice way.

But overall I felt the implementation could be done even more simple while also gaining all the functions of ng-repeat by reusing it as is.

Iverting the idea

So... Rather than focusing on the "repeater" part of it which becomes really complex really fast if we wish to keep up with the ng-repeat directive, dotJEM Angular Tree focuses only on the recursive delegation and instead leaves ng-repeat to do it's job on the nodes.

So in essence we can do:

So dx-node will reuse the block defined by dx-tree and provide the means to point to an actual child node.

An alternative syntax is given that might make it more obvious what we are doing:


The template is the inner html of the dx-tree directive, this is important to know so that you get it right when defining the dx-node. as such if you put the dx-tree directly on the ul, the dx-node must also be an ul (or ol).


Install with bower:

Add a <script> to your index.html:

And add dotjem.angular.tree as a dependency for your app:

comments powered by Disqus
This page was last updated over 4 years ago.