Note that there are some explanatory texts on larger screens.

plurals
  1. PODetached DOM tree with AngularJS/jQuery
    text
    copied!<p>So I have a pretty simple Angular Application and I am trying to figure out what is causing detached DOM trees to show up in the chrome profiler. So for example, when you load up this page:</p> <p><a href="http://rztest.nodejitsu.com/dashboard" rel="noreferrer">http://rztest.nodejitsu.com/dashboard</a></p> <p>I get 2 detached DOM trees, one with 2 entries and another with 3 entries. This page does not use any custom directives so it must be something with either Angular or jQuery however I just don't see anything that would cause these detached DOM trees.</p> <p>The issue becomes even bigger (if you click on the projects link and do another profile, there are a lot more detached DOM trees and entries in them) so I am hoping if I can fix this very simple example, it will cascade throughout the rest of the application.</p> <p>Also note that I am using ui-router however I have tried this same thing with Angular's default router with the same results. Even the todomvc Angular app (<a href="http://todomvc.com/architecture-examples/angularjs/#/" rel="noreferrer">http://todomvc.com/architecture-examples/angularjs/#/</a>) which does not use jQuery has detached DOM trees.</p> <p><strong>UPDATE</strong></p> <p>I have pulled jQuery out of the application and on my simple page, all but one detached dom tree goes away (and that one is from AngularJS which I know where it is). When I try it for a more complex page (with a custom directive that has a templateUrl and does transclusion), removing jQuery does not seem to help.</p> <p>I am not sure if jQuery is the actually issue (or maybe part of it) or how Angular using jQuery/jqLite.</p> <p>Does anyone know if there is a existing detached DOM tree known in jQuery 1.10.x?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload