angular blows away dynamically added classes when compiling directives that compile child directives that use the templateUrl property.

[patrick99e99]

http://plnkr.co/edit/EQlLcqdLfskU9pMox4uF?p=preview

In this example, I have a multi-form-renderer directive which renders a collection of magical-input directives. The multi-form-renderer directive is dynamically adding a class of 'ducktales' with jQuery on the magical-input's container.

If I use templateUrl (as you can see, I am currently using magical_input.html which is set in the templateCache inside the main script.js file), then angular blows away the ducktales class.

If I change the magicalInput directive to use template: '', instead of templateUrl: 'magical_input.html', then the 'ducktales' class is there as it should be.

This bug caused a great deal of frustration and took forever to track down. Thank you.

[caitp]

So, there are some interesting things about this:

• If using template and not templateUrl, this does not happen (!!! / !!!!) edit just realized you mention this workaround in the issue itself =) well, just the same, it's curious
• If using templateUrl with or without replace: true, the thing we're operating on when the cloneConnectFn is called is the pre-templated node (replace: false / replace: true ... The replace: true case is sort of understandable since the node ceases to exist, but the replace: false is sort of mysterious

...

On further inspection:

if (beforeTemplateLinkNode !== beforeTemplateCompileNode) {
  // it was cloned therefore we have to clone as well.
  linkNode = jqLiteClone(compileNode);
  replaceWith(linkRootElement, jqLite(beforeTemplateLinkNode), linkNode);
}

in compileTemplateUrl() doesn't merge the classes from beforeTemplateLinkNode into the new linkNode. It seems a bit weird to modify it just for that, but I guess it could be done