logo标签列表

在Internet Explorer 7上运行AngularJS应用程序

javascriptangularjsinternet-explorer-7
18
为了确保AngularJS能在我需要的浏览器上运行，我制作了一个简单的数据绑定演示，它可以在Firefox、Chrome和IE8+上正常工作，但我还需要让它在IE7上工作。不幸的是，我无法使其在IE7上工作。它只显示具有花括号的html，并忽略ng-属性。
我已经检查过关于AngularJS的 几篇 帖子 关于 AngularJS 在Internet Explorer上的内容，并尝试了每个建议的修复方法，但对我的演示没有用。
这是我的演示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>

这是包含控制器和模型的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

2个回答
62

1）在您的body标签上添加id="ng-app"。

<body ng-app="myApp" id="ng-app">

 2) 告知您的用户/客户当前是2013年。

实际上，我也尝试过使用id="ng-app"作为class="ng-app"的替代方案，但它们都没有解决我的问题。在我的国家（萨尔瓦多），人们仍然使用Windows XP和Internet Explorer 6和7，不幸的是，但我们正在努力说服他们升级。谢谢你的回答。 - Roberto Linares
@RobertoLinares - 我以为他们在美国以外什么都不用，只用Linux和Firefox。;-) - Adam Nofsinger
1
根据我网站上的用户代理日志，仍有许多用户在使用IE6和7，特别是政府/大公司用户。@AdamNofsinger - Roberto Linares
Angular-seed的最新版本为<html lang="en" ng-app="myApp">，这样单独使用可以吗？ - JGallardo
到了2017年，我们仍然可以发现有用户在使用ie7 :/ - Cedric
显示剩余2条评论
19

经过更多阅读，我终于让它起作用了。

IE7的问题在于引导程序没有启动。所以我进行了手动初始化，就像这个页面上展示的那样，然后它就起作用了。

这是我添加到HTML中的代码，确保它只在Internet Explorer 8或更低版本上运行（因为如果我为所有浏览器启动它，一些事件处理程序会在非IE浏览器上重复触发）：

<!--[if lte IE 8]>
<script type="text/javascript">
    $(document).ready(function() {
        angular.bootstrap(document);
    });
</script>
<![endif]-->

$document.ready()部分是jQuery的方式，确保当页面上的所有内容都已经加载完成后才会执行这段代码。由于我在我的网站上使用了jQuery，因此我利用了它。

3
请问您能否给我一个 JSFiddle 或 Plnkr 的示例？我无法让它工作，如果有一个可行的示例我将不胜感激。请提供一个可运行的示例，谢谢。 - K-Dawg
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接