2013-04-10 94 views
18

为了确保AngularJS能够在我需要的浏览器上运行,我做了一个简单的数据结合演示,它可以在Firefox,Chrome和IE8 +上正常工作,但我也需要使它在IE7上运行。不幸的是,我无法让它工作。它只显示带有花括号的html,而忽略ng-属性。在Internet Explorer 7上运行AngularJS应用程序

我已经在Internet Explorer检查severalpostsaboutAngularJS,并试图对每一个建议的修复,但没有工作在我的演示。

这是我的演示的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> 

这是JavaScript的包含控制器的test.js和型号:

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

+1

是的,你做错了什么! IE7支持对任何人都不好。 – themihai 2013-10-20 08:54:22

回答

19

一些更多的阅读后,我可以使它发挥作用。

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我利用了它。

+3

您可以给我看一个JSFiddle或Plnkr的例子吗?我无法得到他的工作,我真的很感激一个工作的例子。 – 2015-01-28 12:11:27

62

1)添加id="ng-app"你的身体标记。

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

  2)通知用户/客户端这是2013年

+0

其实我也试过用id =“ng-app”作为class =“ng-app”的替代方法,但是他们都没有解决我的问题。在我的国家(萨尔瓦多),人们仍然不幸地使用Windows XP和Internet Explorer 6和7,但我们正在说服他们升级的过程中。感谢您的回答。 – 2013-04-10 15:24:39

+0

'id =“ng-app”'不意味着替代。两者都需要,'ng-app =“myApp”'和'id =“ng-app”'。 – Stewie 2013-04-10 17:05:17

+51

步骤2的+1 ... – Stirling 2013-05-15 18:28:32

相关问题