A fully Angular Dynatree Implementation

Recently I have been fiddling with Angular and have noticed that there are not many tree directives around, or they are very basic.  AngularJsTree is one fully angular tree, but it was too hard to configure and we have already been using Dynatree largely in our app, so we weren’t actually looking forward to convetring our tree data into the new format. I had previously written a simple angular directive wrapping the dynatree functionality and with a simple $watch on the tree data so it updates when the data is updated. And that seemed to do what it was supposed (being a tree) for a long time.

But I have noticed that as soon as we had to add even a simple feature to the directive, we had to take care of the jquery->angular->jquery connection and it took time (and thinking). That is why I decided to rewrite completely the tree directive we had to not rely on dynatree.js/jquery at all, but to be fully angular. I started writing the code in Plunkr, then transferred it to my project and continued working there. Just for reference, here is the Plunkr:


You can play around with it and use it as you will.

5 thoughts on “A fully Angular Dynatree Implementation

  1. Hi, great plunker!
    Could you point me to the direction of where you are initializing the dynatree jqeury object? The reason i’m asking is, i’ve copied you plunker and it works great, but how can I add, let’s say, dynatree drag and drop functionality to this implementation?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.