IE8 issue: AngularJS ng-include - partial HTML5 node structure

Question

A quick question about AngularJS ng-include, where partial ones have an HTML5 node structure, i.e.: header, nav, footer ...

In my header, I have everything I need to do to make Angular work in Internet Explorer 8 and below.

All ng-view and ng-include 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 problem is that partial has HTML5 node.

Assumption: partial is called header in partials.

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

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

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

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

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

I have included a script requirement from Angular as well as html5 scrolling.

If I move the contents of a partial root file, everything will be fine.

Thoughts?

Answer 1

This is similar to question # 1381 . In a nutshell, the clone method in jqlite puts an empty namespace in tags that it does not understand, so html5 tags are displayed as <:header> instead of <header> . This can be resolved if you use the full version of jquery. Alternatively, you can install the angular patch (see Problem above). It seems like the question is similar to github here too, depending on the age of this post. There is also a problem with google groups ( Problems with jQuery and ng: include in Internet Explorer ).

Answer 2

It was covered, now that AngularJS seems to have dropped IE8 support with 1.3, they also removed parts of their documentation. Too bad = /

Answer 3

This exact problem is provided in the Angular JS manual http://docs.angularjs.org/guide/ie