javascript AngularJs 模板未在 Internet Explorer 8 中加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18422606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJs templates not loading in internet explorer 8
提问by hilarl
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>
回答by Denison Luz
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.
在需要 Internet Explorer 8 支持的那一刻，我正在处理 AngularJS 项目。一切正常，跨浏览器 - 包括 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 提供支持，我的第一个建议是不要使用自定义元素标签，例如<mynewtag>（改用属性版本<div mynewtag>）。
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]-->
它将为您省去像这样动态创建元素的麻烦：
<!--[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:
您可以在下面找到我的 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.
希望这有帮助。
