$modal leaking DOM

[mohuk]

Hey

I created a simple app in which I open and close a modal. I realized with the three snapshot technique that the DOM is leaking. Here are the versions that I am using:

Angular JS: 1.3.0
Bootstrap: 3.2.0
UI-Bootstrap: 0.11.0

Here is a plunkr: http://plnkr.co/ByyPqhb1msBPi2Vw8dPj

Please let me know if I am doing something wrong or is it angular/angular-ui leaking the DOM?

Thanks

[pkozlowski-opensource]

@mohammadumairkhan hmm, could you please check with 11.2 as there were some changes around modal's DOM management in this version?

[mohuk]

@pkozlowski-opensource absolutely .. ill do that and get back to you

[mohuk]

@pkozlowski-opensource

This is what I get from v11.2

Plunkr: http://plnkr.co/NaRHkzfFLsyVlWtQCPoe

[chrisirhc]

This seems to be only happening in AngularJS 1.3. I think the $parse service is caching some mouse events. Not sure if this is intended or a bug on AngularJS, haven't looked into it further.

[lukasz-karolewski]

+1

[wesleycho]

I did an investigation with an updated Plunker, and this is still an issue in master.

[chrisirhc]

Checking the Retainer tree reveals that this is due to ngAnimate storing a reference to the DOM element. It could be that we're (probably my fault) using $animate wrongly.

Disabling animations indeed removes those leaked nodes. (Plunker with disabled animations)

On further thought, this might be due to ngAnimate not being aware of the removal of the node.

[chrisirhc]

Using $animate.leave instead of .remove() seems to solve this issue.
Plunker

[mohuk]

thanks a lot guys .. its great to see progress on an issue opened long before. 👍