2013-04-10 12 views
18

Nur um sicherzustellen, dass AngularJS mit den Browsern funktioniert, die ich brauche, habe ich eine einfache Datenbing-Demo erstellt, die in Firefox, Chrome und IE8 + funktioniert, muss aber auch auf IE7 funktionieren . Leider kann ich nicht daran arbeiten. Es zeigt nur den HTML-Code mit den geschweiften Klammern, ignoriert die Attribute ng-.AngularJS-App auf Internet Explorer 7 ausführen

Ich habe severalpostsaboutAngularJS auf Internet Explorer überprüft und versuchte, die vorgeschlagenen Korrekturen an jedem aber nichts funktioniert auf meiner Demo.

Dies ist die HTML meiner 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> 

Und das ist die test.js JavaScript, um die Steuerung und die Modelle enthalten:

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"} 
    ]; 
} 

Bin ich etwas falsch? Gibt es noch einen anderen Tipp, damit es funktioniert, den ich verpasst habe?

EDIT: Ich AngularJS v1.0.5

+1

Ja, Sie machen etwas falsch! IE7-Unterstützung ist nicht gut für jedermann. – themihai

Antwort

19

Nach etwas mehr Lesen ich es funktioniert könnte.

Das Problem mit IE7 war das Bootstrapping. Es hat keine gefeuert! Also habe ich eine manuelle Initialisierung gemacht wie in this page gezeigt und es hat funktioniert.

Dies ist der Code, den ich an den HTML hinzugefügt, um es sicherzustellen, wird nur das Feuer auf dem Internet Explorer 8 oder niedriger (denn wenn ich es für alle Browser einig zweimal Event-Handler Feuer Feuer für Nicht-IE-Browser):

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

Der $document.ready() Teil ist der jQuery Weg, um sicher zu sein, dass dieser Code ausgeführt wird, wenn alles auf dem Körper geladen wurde, aber da ich jQuery auf meiner Website verwendet habe, habe ich es ausgenutzt.

+3

Könnten Sie mir bitte ein JSFiddle oder Plnrkr Beispiel zeigen? Ich kann seine Arbeit nicht bekommen, und ich würde wirklich ein funktionierendes Beispiel schätzen. –

62

1) hinzufügen id="ng-app", um Ihren Körper-Tag.

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

  2) Informieren Sie Ihre Benutzer/Client ist es 2013

+0

Eigentlich habe ich auch mit id = "ng-app" als Alternative zu class = "ng-app" versucht, aber keiner von ihnen hat mein Problem gelöst. In meinem Land (El Salvador) werden leider immer noch Windows XP und Internet Explorer 6 und 7 verwendet, aber wir sind dabei, sie zu einem Upgrade zu überreden. Danke für deine Antwort. –

+0

'id =" ng-app "' ist nicht als Alternative gemeint. Beide werden benötigt, ng-app = "myApp" 'und' id = "ng-app" '. – Stewie

+51

+1 für Schritt 2 ... – Stirling

Verwandte Themen