javascript 在 Internet Explorer 7 上运行 AngularJS 应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15914675/
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
Running AngularJS App on Internet Explorer 7
提问by Roberto Linares
Just to make sure if AngularJS works on the browsers I need, I made a simple data-binging demo that works fine on Firefox, Chrome an IE8+ but I also need to make it work on IE7. Unfortunatelly I can't make it work on it. It only shows the html with the curly braces on it, ignoring ng-attributes.
只是为了确定 AngularJS 是否在我需要的浏览器上工作，我做了一个简单的数据绑定演示，它在 Firefox、Chrome 和 IE8+ 上工作正常，但我还需要让它在 IE7 上工作。不幸的是，我无法让它发挥作用。它只显示带有花括号的 html，忽略ng-属性。
I have checked severalpostsaboutAngularJSon Internet Explorer and tried the suggested fixes on each one but nothing works on my demo.
我在 Internet Explorer 上检查了几篇关于AngularJS 的帖子，并在每一篇上都尝试了建议的修复，但在我的演示中没有任何效果。
This is the HTML of my demo:
这是我的演示的 HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Angular IE7 Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!--[if lt IE 9]>
<script type="text/javascript" src="angularjs/html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script type="text/javascript" src="angularjs/json3.js"></script>
<![endif]-->
<script language="JavaScript" src="angularjs/angular.min.js"></script>
<script language="JavaScript" src="angularjs/test.js"></script>
</head>
<body class="ng-app">
<div ng-controller="serversCtrl">
<p>{{texto}}</p>
<table border="1">
<tbody>
<tr><th>Col1</th><th>Col2</th><th>Col3</th></tr>
<tr ng-repeat="item in items"><td>{{item.col1}}</td><td>{{item.col2}}</td><td>{{item.col3}}</td></tr>
</tbody>
</table>
</div>
</body>
</html>
And this is the test.js javascript containing the controller and the models:
这是包含控制器和模型的 test.js javascript：
function serversCtrl($scope, $http, $location) {
$scope.texto = "Texto dinamico";
$scope.items = [
{col1: "foo1", col2: "bar1", col3: "baz1"},
{col1: "foo2", col2: "bar2", col3: "baz2"},
{col1: "foo3", col2: "bar3", col3: "baz3"},
{col1: "foo4", col2: "bar4", col3: "baz4"},
{col1: "foo5", col2: "bar5", col3: "baz5"}
];
}
Am I doing something wrong? Is there any other tip to make it work that I have missed?
难道我做错了什么？有没有其他我错过的技巧可以让它发挥作用？
EDIT:I'm using AngularJS v1.0.5
编辑：我使用的是 AngularJS v1.0.5
回答by Stewie
1) Add id="ng-app"to your body tag.
1）添加id="ng-app"到您的身体标签。
<body ng-app="myApp" id="ng-app">
2) Inform your users/client it's 2013.
2) 通知您的用户/客户现在是 2013 年。
回答by Roberto Linares
After some more reading I could make it work.
经过更多阅读后，我可以使它工作。
The problem with IE7 was the bootstrapping. It was not firing any! so I made a manual initialization as shown in this pageand it worked.
IE7 的问题在于引导。它没有开火！所以我进行了手动初始化，如本页所示，并且成功了。
This is the code I added to the HTML assuring it will only fire on Internet Explorer 8 or lower (because if I fire it for all browsers some event handlers fire twice for non-ie browsers):
这是我添加到 HTML 中的代码，确保它只会在 Internet Explorer 8 或更低版本上触发（因为如果我为所有浏览器触发它，一些事件处理程序会为非 ie 浏览器触发两次）：
<!--[if lte IE 8]>
<script type="text/javascript">
$(document).ready(function() {
angular.bootstrap(document);
});
</script>
<![endif]-->
The $document.ready()part is the jQuery way to be sure this code will be executed when everything on the body has been loaded but since I was using jQuery on my site I took advantage of it.
这$document.ready()部分是 jQuery 方式，以确保当主体上的所有内容都已加载时，将执行此代码，但由于我在我的网站上使用了 jQuery，因此我利用了它。
