wrap() function not working properly when jquery is added

[mitalpritmani]

I have created an angular directive which wraps my input textbox with a div tag. In this div tag, there is a model which shows the value as it's entered in the textbox.

I have used wrap() function on element to wrap the element (here input textbox) with the new div tag. Now the problem is, the input textbox is wrapped correctly but the value is not shown in div tag, instead it shows, {{ name }} only. But when I removed jquery from my project, the value of {{ name }} was shown in that div.

I confirmed this behavior by putting alerts in jquery's wrap() and angularjs' wrap() functions. When angularjs' wrap() function is called, it works fine and angular environment is provided but when jquery's wrap() function is called, wrapping is done but angular environment is not provided or can say the tag is not compiled properly. How to solve this issue?

[pkozlowski-opensource]

@mitalpritmani I'm not sure we can figure what is going on just based on the text description provided. Could you please provide a minimal reproduce scenario using http://plnkr.co/ so it becomes actionable?

[mitalpritmani]

@pkozlowski-opensource Here is the plnkr which I've created. It doesn't cover full functionality but I've added minimal code that can show the issue. Here is the link: http://plnkr.co/edit/jIGf6CaGyCEUaqhKmFbl?p=preview

Please read the description there too. Exchanging the script tags of jquery and angularjs in index.html will show the effect. Removing jquery will also work properly.

I'm asking this because in my application, jquery is needed to get loaded first. And I read somewhere that angularjs functions do same as jquery functions. If so, adding or removing jquery should do the same. The function wrap() when called from angularjs and when called from jquery - works differently.

Note: I checked this for other functions like append() and it seems it works well with them but not with wrap().

[rodyhaddad]

The bugs occurs because jQuery clones the wrapNode (code)

Here's a version of your plunk with a modified version of jQuery where that .clone(true) is removed.

---

Comments in #3860 suggest that jQuery clones the wrapNode in case it's already in the DOM, which makes sense. #4194 is a PR that make jqLite's .wrap behave like jQuery's.

---

In your use case for your directive, you can use a template + replace + transclude to have the same behaviour as the faulty .wrap of jqLite (plunk of what I propose)

[IgorMinar]

this was fixed by #4194