Recently I experienced a weird behavior of an old AngularJS directive which simply added a wrapper DOM using jQuery wrap function together with ngRepeat. Of course there are many better ways to provide the same functionality without use of jQuery, but this is not the focus of this blog. I want to show the reason behind why jQuery is not recommended to be used with AngularJS for DOM manipulation. The demo is set up on JSFiddle here. The directive just calls ‘elem.wrap(‘<div class=”wrapper”></div>’)’ to wrap the DOM, which will make the text black; otherwise it will be in red. Then an element using this directive is rendered with ngRepeat on an object to show two texts. A button “Reset allTexts” is used to clone this object and reassign itself. Sounds easy enough and there shouldn’t be any changes after resetting the object? Try it. As you can see, the DOM structure is changed and the texts are now not inside the wrapper DOMs. What happened?
