AngularJs模板在Internet Explorer 8不加载 [英] AngularJs templates not loading in internet explorer 8

查看：328
本文介绍了AngularJs模板在Internet Explorer 8不加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我不能够呈现AngularJs模板在Internet Explorer 8，我遵循了使用Internet Explorer中AngularJs几个建议，但我仍然无法得到它的工作。下面是我的html code为包括我已经使用了脚本的页面。是否有可能指出，如果我使用任何可能使code在Internet Explorer中无法正常工作？我可以上传其他文件的详细信息，如果有人想知道它的详细信息。一切都完美的作品在所有其他浏览器只是IE浏览器。

 ＆LT;！DOCTYPE HTML＆GT;
＆LT;！ -  [如果LT IE 7＆GT; ＆LT; HTML类=无JS LT-IE9 LT-IE8 LT-IE7＆GT;百分比抑制率ENDIF]  -  GT！;
＆LT;！ -  [如果IE 7＆GT; ＆LT; HTML类=无JS LT-IE9 LT-IE8＆GT;百分比抑制率ENDIF]  -  GT！;
＆LT;！ -  [如果IE 8]＆GT; ＆LT; HTML类=无JS LT-IE9＆GT;百分比抑制率ENDIF]  -  GT！;
＆LT;！ -  [如果GT IE 8] GT;＆LT;！ - ＆GT; ＆LT; HTML的xmlns：NG =htt​​p://angularjs.orgID =NG-应用NG-应用=tripApp级=无JS＆GT; ＆LT;！ - ＆LT;！[ENDIF]  - ＆GT;
  ＆LT; HEAD＆GT;
  ＆LT;间的charset =UTF-8＆GT;
    ＆LT; META HTTP-EQUIV =X-UA-Compatible的内容=IE =边缘，镀铬= 1＆GT;
    ＆LT;标题＆GT;＆LT; /标题＆GT;
    ＆LT; META NAME =说明内容=＆GT;
    ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1.0＆GT;
    ＆LT;！ - 广场的favicon.ico和苹果触摸的icon.png在根目录下 - ＆GT;        ＆LT;  - 编译：CSS（{TMP，应用}）样式/的main.css  - ＆GT;
        ＆LT;链接rel =stylesheet属性HREF =bower_components /引导/距离/ CSS / bootstrap.min.css＆GT;
        ＆LT;链接HREF =// netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css的rel =stylesheet属性＆GT;
        ＆LT;链接rel =stylesheet属性HREF =风格/的main.css＆GT;
        ＆LT;链接href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700'相对=样式类型=文/ CSS'＆GT;
        ＆LT;风格＆GT;
            @ -moz-文件网址 -  preFIX（）{
                    .filter菜单.btn {
                        填充：0;
                    }
                }
        ＆LT; /风格＆GT;
        ＆所述;！ -  endbuild  - ＆GT;
        ＆LT;脚本SRC =bower_components / Modernizr的/ modernizr.js＆GT;＆LT; / SCRIPT＆GT;        ＆LT;！ -  [如果LTE IE 8] GT; ＆LT;脚本SRC =脚本/角-UI-ieshiv.js＆GT;＆LT; / SCRIPT＆GT;＆LT;！[ENDIF]  - ＆GT;        ＆LT;！ -  [如果LTE IE 8] GT;
            ＆LT;脚本＆GT;
                使用document.createElement（'NG-包括'）;
                使用document.createElement（'NG-复数'）;
                使用document.createElement（'NG-视图'）;                //您可以选择这些对CSS
                使用document.createElement（'NG：包括'）;
                使用document.createElement（'NG：复数'）;
                使用document.createElement（'NG：视图'）;
            ＆LT; / SCRIPT＆GT;
        百分比抑制率ENDIF]  -  GT！;        ＆LT;！ -  [如果LT IE 7＆GT;
            ＆LT;脚本SRC =HTTP：//ie7-js.google$c$c.com/svn/version/2.1（BETA4）/IE7.js＆GT;＆LT; / SCRIPT＆GT;
        百分比抑制率ENDIF]  -  GT！;
        ＆LT;！ -  [如果LT IE 8] GT;
            ＆LT;脚本SRC =HTTP：//ie7-js.google$c$c.com/svn/version/2.1（BETA4）/IE8.js＆GT;＆LT; / SCRIPT＆GT;
        百分比抑制率ENDIF]  -  GT！;
        ＆LT;！ -  [如果LT IE 9] GT;
            ＆LT;脚本SRC =HTTP：//ie7-js.google$c$c.com/svn/version/2.1（BETA4）/IE9.js＆GT;＆LT; / SCRIPT＆GT;
        百分比抑制率ENDIF]  -  GT！;
        ＆LT;！ - ＆LT;脚本SRC =bower_components /更少/距离/不太1.4.2.min.js＆GT;＆LT; / SCRIPT＆GT; - ＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT;！ -  [如果LT IE 8] GT;
      ＆LT; p =类chromeframe＆gt;您使用的是过时的浏览器。 ＆LT; A HREF =htt​​p://browsehappy.com/＆GT;现今LT升级您的浏览器; / A＆GT;或LT; A HREF =htt​​p://www.google.com/chromeframe/?redirect=true＆GT;安装谷歌Chrome Frame的＆LT; / A＆GT;更好地体验本网站＆LT; / P＆GT;
    百分比抑制率ENDIF]  -  GT！;    ＆LT;！ -  [如果LT IE 9] GT;
      ＆LT;脚本SRC =bower_components / ES5-垫片/ ES5-shim.js＆GT;＆LT; / SCRIPT＆GT;
      ＆LT;脚本SRC =bower_components / json3 / lib目录/ json3.min.js＆GT;＆LT; / SCRIPT＆GT;
    百分比抑制率ENDIF]  -  GT！;    ＆LT;！ - 加入你的网站或应用程序的内容在这里 - ＆GT;
    ＆LT;一边ID =侧边栏＆GT;
        ＆LT; UL类=列表的无样式＆GT;
            ＆LT;李＆GT;＆LT; A HREF =＃/酒店prevent＆GT;＆LT;跨度类=图标，公文包图标-2X＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;李＆GT;＆LT; A HREF =＃/餐厅prevent＆GT;＆LT;跨度类=图标食物图标-2X＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;李＆GT;＆LT; A HREF =＃/咖啡prevent＆GT;＆LT;跨度类=图标咖啡图标-2X＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; /一旁＆GT;
    ＆lt;节ID =顶栏＆GT;
        ＆LT; UL类=列表的无样式＆GT;
            ＆LT;立GT;＆LT;跨度类=图标公文包图标-2X＆GT;＆LT; / SPAN＆GT;＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; /节＆gt;    ＆lt;节ID =主容器＆GT;
        ＆lt;节UI的视图id =主内的容器＆GT;＆LT; /节＆gt;
    ＆LT; /节＆gt;    ＆LT;  - 谷歌Analytics（分析）：改变UA-XXXXX-X是你的网站的ID。 - ＆GT;
    ＆LT;脚本＆GT;
      VAR _gaq = ['_ setAccount'，'UA-XXXXX-X]，['_ trackPageview的'];
      （函数（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）}（文件，'脚本'））;
    ＆LT; / SCRIPT＆GT;    ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>
    ＆LT;脚本SRC =bower_components / jQuery的-宽松/ jquery.easing.min.js＆GT;＆LT; / SCRIPT＆GT;    ＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js＆GT;＆下; /脚本＆GT;
    ＆所述; SCRIPT SRC =htt​​p://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js＆GT;＆下; /脚本＆GT;
    ＆LT;脚本SRC =bower_components /角度的UI路由器/发行/角-UI-router.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.0.3/angular-resource.min.js＆GT;＆下; /脚本＆GT;
    ＆所述; SCRIPT SRC =bower_components /角动画/角animate.min.js＆GT;＆下; /脚本＆GT;
    ＆LT;脚本SRC =bower_components /角承诺跟踪器/承诺-tracker.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =脚本/ app.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =脚本/ services.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =脚本/ directives.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =脚本/控制器/ hotelsController.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =脚本/控制器/ restaurantsController.js＆GT;＆LT; / SCRIPT＆GT;    ＆所述; SCRIPT SRC =bower_components /砖石/ masonry.js＆GT;＆下; /脚本＆GT;    ＆LT;  - 编译：JS（{TMP，应用}）脚本/ scripts.js中 - ＆GT;
    ＆所述;！ -  endbuild  - ＆GT;
  ＆LT; /身体GT;
＆LT; / HTML＆GT;


解决方案

我的工作AngularJS项目在需要的Internet Explorer 8支持的时刻。
一切正常跨浏览器 - 包括IE 8

如果你需要给IE8支持我的第一个忠告对你是不使用自定义元素标记，如＆LT; mynewtag＆GT; （使用属性版本＆LT; D​​IV mynewtag方式＆gt; 代替）

这将节省您在这样一个动态创建的元素头痛：
＆LT;！ - [如果LTE IE 8]＆GT;＆LT;脚本＆GT;使用document.createElement（'mynewtag'）;＆LT; / SCRIPT＆GT;＆LT; ENDIF] - ＆GT; <！/ code>

下面你可以找到我的index.html自举了AngularJS与IE 8的工作：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT;！ -  [如果IE 8]＆GT;
＆LT; HTML类=无JS LT-IE9的xmlns：NG =htt​​p://angularjs.orgID =NG-应用NG-应用=对myApp＆GT;
百分比抑制率ENDIF]  -  GT！;
＆LT;！ -  [如果GT IE 8] GT;＆LT;！ - ＆GT;
＆LT; HTML类=无JSNG-应用=对myApp＆GT;
＆LT;！ - ＆LT;！[ENDIF]  - ＆GT;
＆LT; HEAD＆GT;
   ＆LT;间的charset =UTF-8＆GT;
   ＆LT; META HTTP-EQUIV =X-UA-Compatible的内容=IE =边缘，镀铬= 1＆GT;
   ＆LT;标题NG绑定=头＆GT;＆LT; /标题＆GT;
   ＆LT; META NAME =说明内容=＆GT;   ！＆LT;  - 编译：CSS（{TMP，应用}）系统/ CSS /的main.css  - ＆GT;
   ＆LT;链接rel =stylesheet属性HREF =系统/ CSS /的main.css＆GT;
   ＆所述;！ -  endbuild  - ＆GT;   ＆LT;！ -  [如果IE 8]＆GT;
       ＆LT; SCRIPT SRC =UI /组件/ ES5-垫片/ ES5-shim.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT; SCRIPT SRC =UI /组件/ json3 / lib目录/ json3.min.js＆GT;＆LT; / SCRIPT＆GT;
   百分比抑制率ENDIF]  -  GT！;
   ＆LT; /头＆GT;
＆LT;机身NG控制器=myAppCtrl＆GT;
＆LT;！ - 在这里添加网站或应用程序内容 - ＆GT;
＆LT; D​​IV CLASS =内容NG-视图=＆GT;＆LT; / DIV＆GT;＆LT;  - 编译：JS系统/ JS / plugins.js  - ＆GT;
＆LT; SCRIPT SRC =UI /组件/角/ angular.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ -  endbuild  - ＆GT;＆LT;  - 编译：JS（{TMP，应用}）系统/ JS / scripts.js中 - ＆GT;
＆LT;脚本SRC =系统/ JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =系统/ JS /过滤器/ filters.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =系统/ JS /控制器/ controllers.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =系统/ JS /服务/ services.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =系统/ JS /指令/ directives.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =系统/ JS / scripts.js中＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ -  endbuild  - ＆GT;
＆LT;  - 编译：JS系统/ JS / modules.js  - ＆GT;
＆LT; SCRIPT SRC =UI /组件/角资源/角resource.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; SCRIPT SRC =UI /组件/角饼干/角cookies.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; SCRIPT SRC =UI /组件/角的sanitize /角sanitize.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ -  endbuild  - ＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

希望这是有帮助的。

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.

<!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>

解决方案

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.

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).

It will save you the headache of creating elements on the fly like this one: <!--[if lte IE 8]><script> document.createElement('mynewtag');</script><![endif]-->

Below you can find my index.html bootstrapped for AngularJS to work with 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.

这篇关于AngularJs模板在Internet Explorer 8不加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆