代码之家 › 专栏 › 技术社区 › Roberto Linares

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

internet-explorer-7 angularjs javascript

Roberto Linares · 技术社区 · 11 年前

为了确保AngularJS是否能在我需要的浏览器上运行,我制作了一个简单的数据狂欢演示,在Firefox、Chrome和IE8+上运行良好,但我也需要在IE7上运行。不幸的是,我无法使它工作。它只显示带有大括号的html,忽略 ng- 属性。

我已经检查过了 several posts about 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 回复 | 直到 7 年前

Stewie 10 年前

1) 添加 id="ng-app" 贴在你的身体标签上。

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

2) 通知您的用户/客户现在是2013年。

Dhruv Baldawa 10 年前

再读几遍之后,我就能把它发挥作用了。

IE7的问题在于引导。它没有开火!所以我进行了手动初始化,如 this page 它奏效了。

这是我添加到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,所以我利用了它。