Las templates de AngularJs no se cargan en Internet Explorer 8

No puedo representar las templates de AngularJs en Internet Explorer 8, he seguido varias sugerencias para usar AngularJs en Internet Explorer, pero todavía no puedo hacerlo funcionar. a continuación está mi código html para la página, incluidos los scripts que he utilizado. ¿Es posible señalar si estoy usando algo que podría hacer que el código no funcione en Internet Explorer? Puedo upload detalles de otros files si a alguien le gustaría conocer los detalles. Todo funciona perfectamente en todos los otros browseres, pero solo en Internet Explorer.

<!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tripApp" class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <!-- build:css({.tmp,app}) styles/main.css --> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="styles/main.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'> <style> @-moz-document url-prefix() { .filter-menu .btn { padding: 0; } } </style> <!-- endbuild --> <script src="bower_components/modernizr/modernizr.js"></script> <!--[if lte IE 8]> <script src="scripts/angular-ui-ieshiv.js"></script><![endif]--> <!--[if lte IE 8]> <script> document.createElement('ng-include'); document.createElement('ng-pluralize'); document.createElement('ng-view'); // Optionally these for CSS document.createElement('ng:include'); document.createElement('ng:pluralize'); document.createElement('ng:view'); </script> <![endif]--> <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script> <![endif]--> <!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <!-- <script src="bower_components/less/dist/less-1.4.2.min.js"></script> --> </head> <body> <!--[if lt IE 8]> <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?networkingirect=true">install Google Chrome Frame</a> to better experience this site.</p> <![endif]--> <!--[if lt IE 9]> <script src="bower_components/es5-shim/es5-shim.js"></script> <script src="bower_components/json3/lib/json3.min.js"></script> <![endif]--> <!-- Add your site or application content here --> <aside id="sidebar"> <ul class="list-unstyled"> <li><a href="#/hotels" prevent><span class="icon-briefcase icon-2x"></span></a></li> <li><a href="#/restaurants" prevent><span class="icon-food icon-2x"></span></a></li> <li><a href="#/cafe" prevent><span class="icon-coffee icon-2x"></span></a></li> </ul> </aside> <section id="topbar"> <ul class="list-unstyled"> <li><span class="icon-briefcase icon-2x"></span></li> </ul> </section> <section id="main-container"> <section ui-view id="main-inner-container"></section> </section> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script> var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src='//www.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script')); </script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="bower_components/jquery-easing/jquery.easing.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> <script src="http://code.angularjs.org/1.0.3/angular-resource.min.js"></script> <script src="bower_components/angular-animate/angular-animate.min.js"></script> <script src="bower_components/angular-promise-tracker/promise-tracker.min.js"></script> <script src="scripts/app.js"></script> <script src="scripts/services.js"></script> <script src="scripts/directives.js"></script> <script src="scripts/controllers/hotelsController.js"></script> <script src="scripts/controllers/restaurantsController.js"></script> <script src="bower_components/masonry/masonry.js"></script> <!-- build:js({.tmp,app}) scripts/scripts.js --> <!-- endbuild --> </body> </html> 

Estoy trabajando en el proyecto AngularJS en el momento en que se requiere soporte de Internet Explorer 8. Todo funciona bien, browseres cruzados, incluido IE 8.

Si necesita dar soporte a IE8, mi primer consejo para usted es no usar tags de elemento personalizadas como <mynewtag> (en su lugar, use la versión del atributo <div mynewtag> ).

Le ahorrará el dolor de cabeza de crear elementos sobre la marcha como este: <!--[if lte IE 8]><script> document.createElement('mynewtag');</script><![endif]-->

A continuación puede encontrar mi index.html bootstrapped para que AngularJS funcione con IE 8:

 <!DOCTYPE html> <!--[if IE 8]> <html class="no-js lt-ie9" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" ng-app="myApp"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title ng-bind="header"></title> <meta name="description" content=""> <!-- build:css({.tmp,app}) system/css/main.css --> <link rel="stylesheet" href="system/css/main.css"> <!-- endbuild --> <!--[if IE 8]> <script src="ui/components/es5-shim/es5-shim.js"></script> <script src="ui/components/json3/lib/json3.min.js"></script> <![endif]--> </head> <body ng-controller="myAppCtrl"> <!-- Add site or application content here --> <div class="content" ng-view=""></div> <!-- build:js system/js/plugins.js --> <script src="ui/components/angular/angular.js"></script> <!-- endbuild --> <!-- build:js({.tmp,app}) system/js/scripts.js --> <script src="system/js/app.js"></script> <script src="system/js/filters/filters.js"></script> <script src="system/js/controllers/controllers.js"></script> <script src="system/js/services/services.js"></script> <script src="system/js/directives/directives.js"></script> <script src="system/js/scripts.js"></script> <!-- endbuild --> <!-- build:js system/js/modules.js --> <script src="ui/components/angular-resource/angular-resource.js"></script> <script src="ui/components/angular-cookies/angular-cookies.js"></script> <script src="ui/components/angular-sanitize/angular-sanitize.js"></script> <!-- endbuild --> </body> </html> 

Espero que sea útil.