AngularJs模板未在Internet Explorer 8中加载

I am not able to render AngularJs templates in Internet Explorer 8, I have followed several suggestions for using AngularJs in Internet Explorer but I am still not able to get it to work. below is my html code for the page including the scripts I have used. Is it possible to point out if I am using anything that could make the code not work in Internet Explorer? I can upload details of other files if anybody would like to know the details of it. Everything works perfectly on all other browsers but just Internet Explorer.

我无法在Internet Explorer 8中呈现AngularJs模板，我已经遵循了几个在Internet Explorer中使用AngularJs的建议，但我仍然无法使其工作。下面是我的页面的html代码，包括我使用过的脚本。是否有可能指出我是否使用任何可能使代码无法在Internet Explorer中运行的东西？如果有人想知道其他详细信息，我可以上传其他文件的详细信息。一切都适用于所有其他浏览器，但只是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/?redirect=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>

1 个解决方案

#1

I am working on AngularJS project at the moment where Internet Explorer 8 support is required. Everything is working fine cross browsers - including IE 8.

我现在正在使用AngularJS项目，需要Internet Explorer 8支持。一切都运行良好的跨浏览器 - 包括IE 8。

If you need to give IE8 support my first advice for you is to not use custom element tags such as <mynewtag> (use the attribute version <div mynewtag> instead).

如果您需要提供IE8支持，我的第一个建议是不使用自定义元素标记，例如（使用属性版本

代替）。

It will save you the headache of creating elements on the fly like this one: 

它将为您节省在运行中创建元素的头痛，如下所示：<！ - [if lte IE 8]>

Below you can find my index.html bootstrapped for AngularJS to work with IE 8:

下面你可以找到我的index.html引导AngularJS来使用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>

Hope that's helpful.

希望这很有帮助。

#1