本文介绍了在 Internet Explorer 7 上运行 AngularJS 应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为了确保 AngularJS 是否能在我需要的浏览器上运行，我做了一个简单的数据绑定演示，它在 Firefox、Chrome 和 IE8+ 上运行良好，但我还需要让它在 IE7 上运行.不幸的是，我无法让它发挥作用.它只显示带有花括号的 html，忽略 ng- 属性.
我检查了几个帖子 关于 AngularJS 在 Internet Explorer 上尝试了建议的修复，但在我的演示中没有任何效果.
这是我的演示的 HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><头><title>Angular IE7 测试</title><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><!--[如果是 IE 9]><script type="text/javascript" src="angularjs/html5shiv.js"></script><![endif]--><!--[如果是 IE 8]><script type="text/javascript" src="angularjs/json3.js"></script><![endif]--><脚本语言="JavaScript" src="angularjs/angular.min.js"></script><脚本语言="JavaScript" src="angularjs/test.js"></script><body class="ng-app"><div ng-controller="serversCtrl"><p>{{texto}}</p><表格边框=1"><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>
</html>
这是包含控制器和模型的 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"}];}
我做错了吗?有没有其他我错过的技巧可以让它发挥作用?
我使用的是 AngularJS v1.0.5
解决方案
阅读更多内容后，我可以让它发挥作用.
IE7 的问题在于引导.它没有开火！所以我做了一个手动初始化，如这个页面所示，并且成功了.
这是我添加到 HTML 中的代码，确保它只会在 Internet Explorer 8 或更低版本上触发(因为如果我为所有浏览器触发它，一些事件处理程序会为非 IE 浏览器触发两次):
<script type="text/javascript">$(document).ready(function() {angular.bootstrap(文档)；});<![endif]-->
$document.ready() 部分是 jQuery 方式，以确保当正文中的所有内容都已加载时将执行此代码，但由于我在我的网站上使用 jQuery，我利用了
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.
I have checked several posts about AngularJS on Internet Explorer and tried the suggested fixes on each one but nothing works on my demo.
This is the HTML of my demo:
<!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:
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
解决方案
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 page and it worked.
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):
<!--[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.
这篇关于在 Internet Explorer 7 上运行 AngularJS 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
