AngularJS模板在Internet Explorer 8中无法加载

Question

AngularJS模板在Internet Explorer 8中无法加载

javascripthtmlinternet-explorerangularjsangular-ui

7

我无法在Internet Explorer 8中呈现AngularJs模板，我已经尝试了多种使用AngularJs在Internet Explorer中的建议，但仍然无法使其正常工作。以下是我的页面的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>

- hilarl

在这个模板中，你在哪里初始化你的应用程序？ - BKM

正如@BKM所说，IE8及以下版本中没有应用程序名称的指令。 - akonsu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Denison Luz · Accepted Answer

我目前正在从事 AngularJS 项目，其中需要支持 Internet Explorer 8。跨浏览器的工作都很好 - 包括 IE 8。

如果您需要为 IE8 提供支持，我的第一个建议是不要使用自定义元素标签，如 <mynewtag>（改用属性版本 <div mynewtag>）。

这将避免您创建类似下面这个动态元素的麻烦：  下面是我为 AngularJS 准备的 index.html 文件，以便在 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>

希望能对您有所帮助。