Internet Explorer 和 Angular JS答案

【问题标题】：Internet Explorer and Angular JSInternet Explorer 和 Angular JS
【发布时间】：2012-10-17 13:21:15
【问题描述】：

目前在 Internet Explorer 和 Angular js 方面存在问题。

如下所示的 html 在 Chrome 和 Firefox 中呈现良好，但是 ng-view 标签中的任何内容在 IE 中根本无法呈现。

<html xmlns:ng="http://angularjs.org">
<html lang="en" ng-app="poc">
<head>
<meta charset="utf-8">
<title>poc</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="cordova-2.1.0.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>

我尝试注入的部分如下所示：

<section>
<h1>Proof of Concept</h1>
<ul>
<li><a href="#/phonegap">Try Phonegap Features</a></li>
<li><a href="#/observations">Test Websocket Requests</a></li>
<li><a href="#/persondetails">Test Person Details Requests</a></li>
</ul>
<section>

下面的代码展示了我们正在使用的路由实现：

'use strict';

angular.module('poc', ['pocFilters', 'pocServices']).
config(['$routeProvider', function($routeProvider){
$routeProvider.
    when('/poc', {templateUrl: 'partials/poc.html',   controller: PocCtrl}).

    when('/observations', {templateUrl: 'partials/observations.html', 
    controller: ObservationsCtrl}).

    when('/phonegap', {templateUrl: 'partials/phonegap.html',
    controller: PhonegapCtrl}).

    when('/persondetails', {templateUrl: 'partials/persondetails.html',
    controller: PersondetailsCtrl}).

    otherwise({redirectTo: '/poc'});
}]);

任何人对可能导致 IE 出现问题的原因有任何想法吗？

谢谢，

帕特里克

【问题讨论】：

您是否尝试过将所有 HTML 放在一个文件中而不经过 Angular？这将告诉您这是 IE 问题还是 Angular 问题。
嗨，dnc253，是的，我已经尝试过这样做，并且效果很好。在 Chrome 和 Firefox 中使用 Angular 都可以正常工作，因此使用 IE 和 Angular 可能是某种错误或奇怪的怪癖。

标签： internet-explorer angularjs

【解决方案1】：

首先，您应该查看 IE 上的 angularjs 文档。我为angular-ui 编写了一个 IE Shiv，它使您免于执行此操作，并且当您创建元素样式指令（ng-view、ng-include 等）时，您可以指示 shiv 您的哪些角度模块具有这些指令。

【讨论】：

【解决方案2】：

将 id="ng-app" 添加到您正在使用 ng-app 指令的标签中。在您的情况下，标签是<html>。因此，您的 html 标记应如下所示，以使应用程序在 IE 中呈现。

<html lang="en" ng-app="poc" id="ng-app">

而不是

<html lang="en" ng-app="poc">

【讨论】：

【解决方案3】：

Angular 1.2 RC1 不能很好地与 IE 11 配合使用：路由时存在 CORS 问题。结果是视图没有被渲染（因为它们的内容没有被获取）

如果您怀疑这是问题所在 - 打开控制台 (F12)。你可以在那里看到异常。

这已在 Angular 1.2 RC3 中得到解决。

【讨论】：

太好了...我有一个 1.2.0 版本...切换到 1.2.32 解决了这个问题...非常感谢

【解决方案4】：

HTML5 元素需要一个 shim（特别是 section 标签），当你只需要一个时，你有两个 html 标签，你真的应该声明一个 doctype，你还需要添加 id="ng-app" 到让 IE7 工作的 html 标签。

要填充元素，请为每个元素创建一个带有 document.createElement(); 语句的脚本（文件或只是一个标签） - 在您的情况下为 document.createElement('section')。

这应该会让你正确。

【讨论】：

另外，你应该关闭section标签而不是打开另一个</section>