Can't use custom element directives in IE with templates

[jardilio]

The IE documentation (here: http://docs.angularjs.org/guide/ie) states that for custom element directives, you need only to call document.createElement('my-element') for support.

This is only partially true as it appears that this fix will only work if the element was natively added to the DOM (example: It was already in your index.html page or you used document.createElement('my-element') and appended the result to another element).

It doesn't appear to work if you are appending the value to innerHTML or using jQuery to wrap an HTML string representing the markup which contains the custom element. In this case, it fails in the same way that the working example does if you didn't do the document.createElement shim. The DOM is now corrupted.

Where this all ends up breaking is lets say you have 2 directives (directive-a and directive-b) which are both registered as custom elements. In this example, directive-a has a template and that template contains a reference to directive-b. Angular will jQuery wrap this template, but in IE8, the template is corrupted and in advanced combinations of replace/transclude with multiple elements, items can become reparented to the wrong item.

See following plnkr (http://plnkr.co/edit/lYN0YeYJaDmTvEdMtzn1?p=preview). This example will work fine in browers other than IE8 (you'll need to run the output directly in IE8 as plnkr doesn't support IE8 - http://run.plnkr.co/plunks/lYN0YeYJaDmTvEdMtzn1/).

[symblify]

Same issue as #1381?

[symblify]

Also #3015 and #3050?

[thebigredgeek]

@symblify , Could we rig angular to apply a shim automagically?

[thebigredgeek]

Thereby abstracting this issue away?

[flashjames]

I can confirm that this bug is there. I first had the problem that both html5 tags and custom directives didn't work in templates on IE8. But when I included jQuery, the html5 tags started working, but not the custom directive tags.

This issue was closed #1381, but it seems to be connected like symliby said. Since html5 tags work when you include jQuery.

Neither built-in angularjs directives like "ng-include" nor my own directives works in templates, if I set them as tags. It luckily works as attributes tho.

Though, when I put the directives as tags in index.html where ng-app is initialized the directives work.

There's a open question about this on stackoverflow too: http://stackoverflow.com/questions/15118758/ie8-issue-angularjs-ng-include-partials-with-html5-node-structure

[caitp]

http://docs.angularjs.org/guide/ie

[laurent-le-graverend]

Also faced this situation in AngularJS 1.2.4 + html5Shiv (IE8 + XP).
"section" element is rendered as ":section" in ng-view (note the colon before the tag).

[dtabuenc]

The issue is that even after doing document.createElement() IE8 will only parse correctly if the html being parsed is connected to the document, so it won't work when parsing as detatched node. For example see vojta's fix to make a directive test work in IE8:

vojtajina/ng-directive-testing@25e8d7a

[devamir]

Hey,

Is this issue resolved?

[Narretz]

IE8 is no longer supported.