3

I am new to angular, so maybe I'm going about this completely wrong. I am attempting to make a treeView with angularJS directives. The code that I have so far accomplishes this, except that there appears to be a memory leak as each time the tree view reloads it slows down, and eventually crashes the browser.

I have created the following two directives to accomplish my task jscTreeView and jscTreeNode

This fiddler has my source, it builds you a random tree, and gives you the ability to choose the amount of nodes in the tree. If you bump that number up to a higher number, and reload several times you will notice that it progressively slows down to each time.

Any ideas on how to clean up after myself would be greatly appreciated, thanks.

Edit:

This fiddler is a second attempt with this one I went in a completely different direction. It is much more efficient, and the code is more clean in my opinion. However, this one has an issue too. periodically, and seemingly randomly on refresh of the tree this one throws an infinite digest exception.

Note: not all of the functionality that was in the former tree is in the current tree yet. That is just because I have not programmed it yet.

Improve this question
16
  • 2
    I don't think the scope ever gets destroyed... I put a break point in the element.on('remove' thing but I couldn't get it to trigger. Commented Sep 15, 2015 at 3:32
  • I noticed the same thing, but couldn't understand why, any idea? Commented Sep 15, 2015 at 3:41
  • I've added a template.on("remove"... at jscTreeNode and things got a little better here both at speed and memory consumption, but still far from perfect. Commented Sep 15, 2015 at 3:45
  • 1
    the infinite digest error comes if the tree goes >= ten levels deep. Commented Sep 16, 2015 at 20:56
  • 1
    I just added a function. See here and check the console... number of scopes is contained. I think you're right about the depth of the tree. It's a number you can configure though. See bottom of page. Commented Sep 16, 2015 at 23:11

1 Answer 1

Reset to default
1

As the discussion in the comments indicates, I was creating, but never properly releasing, scopes in my tree view. While the solution was not very easy to figure out it is actually quite an easy solution, and clarified things a lot for me.

What I needed to do was make a clone of the root scope of my tree var newScope = scope.$new();, I then built all of the rest of the subtrees as well as their associated nodes and compiled with the cloned scope newScope. After the compile it stores the cloned scope into a variable private to the directive lastScope = newScope;. When the watch property is updated, and calls back to my directive the last cloned scope is destroyed lastScope.$destroy();. Destroying that cloned scope automatically destroys any child scope created beneath it (the nodes, as well as the subtrees). A new clone of the scope is created, and the process is repeated, thanks to @Jorg's tool to count scopes, I can see that everything is being cleaned up nicely on each iteration. Here is a fiddle to the solution.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.