IE8 issue: AngularJS ng-include - partials with HTML5 node structure

Question

Quick question about AngularJS ng-includes where the partials have HTML5 node structure ie: header, nav, footer...

In my header, i have all the great stuff to make Angular work well in Internet Explorer 8 and below.

All the ng-view and ng-includes work as intended.

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Internet Explorer AngularJS element creation -->
<!--[if lte IE 8]>
    <script>
        document.createElement('ng-include');
        document.createElement('ng-pluralize');
        document.createElement('ng-view');
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
    </script>
    <script src="http://cdnjs.cloudfare.com/ajax/libs/json3/3.2.4/json3.min.js"></script>
<![endif]-->

The trouble is when the partial has an HTML5 node in it.

Assumption: partial is called header in partials.

<ng-include src="'partials/header.partial.html'"></ng-include>

Example 1 (header.partial.html source - does not display in IE8)

<header>
    <h1>logo</h1>
</header>

Example 2 (header.partial.html source - display in IE8)

<div>
    <h1>logo</h1>
</div>

I have included the require script from angular as well as the html5 shim.

If i move the content of the partial to the root file, everything is good.

Thoughts?

Answer 1

This seems to be related to issue #1381. In a nutshell, the clone method in jqlite puts an empty namespace on tags it doesn't understand therefore html5 tags show up like this <:header> instead of <header>. This may be resolved if you use the full version of jquery. Alternatively you can patch angular (see the issue above). It seems the issue is sort of dead on github and here based on the age of this post. There is also a related issue on google groups (Problems with jQuery and ng:include in Internet Explorer).