AngularJS: A lazily-loaded recursive tree widget

Note (July 2014): I can no longer recommend this directive as there are far better tree directives out there. As always, YMMV.

Original post:
I had the chance to use the wonderful AngularJS javascript framework for another project, so I jumped on it. One requirement was a tree representation of some data, where children could be loaded dynamically. A quick google search revealed a dearth of tree widgets, so I hacked something together myself. Inspiration came from Andy Joslin’s recursive tree implementation.

Often, a dataset is too large to be efficiently preloaded on the client-side, so it makes sense to lazily load a node’s children on demand. In this implementation, the loading function can either return a promise or an array of child nodes.

Features:

• Node selection. Catch a “nodeSelected” event on the controller’s scope. You can also pass an ID for the node which should be initially selected.
• Dynamic loading of children. Define a function that will be called with the node that is being expanded.
• Auto-expansion. Define a comma-separated hierarchy of node ids to expand.

This is a very rough implementation, surely replete with bugs, but has functioned thus far for my uses. Usage, suggestions and forks are all welcomed. Try it out:

Edit (2/28/14): Finally posted the source code to GitHub. I should also mention that of all the modules I’ve open-sourced, this is by far the least-tested. It is the only one not to have seen extensive production use.