2013-04-10 16 views
18

Giusto per assicurarmi che AngularJS funzioni sui browser di cui ho bisogno, ho realizzato una semplice demo di bing dati che funziona bene su Firefox, Chrome e IE8 + ma devo anche farlo funzionare su IE7 . Purtroppo non posso farlo funzionare. Mostra solo l'html con le parentesi graffe su di esso, ignorando gli attributi ng-.Esecuzione di AngularJS App su Internet Explorer 7

Ho controllato severalpostsaboutAngularJS su Internet Explorer e ha cercato le correzioni suggerite su ciascuno di essi, ma non funziona niente sul mio demo.

Questo è il codice HTML del mio 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> 

E questo è il test.js javascript contenenti il ​​controller ei modelli:

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

sto facendo qualcosa di sbagliato? C'è qualche altro suggerimento per farlo funzionare che ho perso?

EDIT: sto usando AngularJS v1.0.5

+1

Sì, stai facendo qualcosa di sbagliato! Il supporto per IE7 non va bene per nessuno. – themihai

risposta

19

Dopo un po 'di più la lettura ho potuto farlo funzionare.

Il problema con IE7 era il bootstrap. Non stava sparando! così ho fatto un'inizializzazione manuale come mostrato in this page e ha funzionato.

Questo è il codice ho aggiunto al codice HTML assicurando sarà solo il fuoco su Internet Explorer 8 o inferiore (perchè se licenzio per tutti i browser alcuni gestori di eventi fuoco due volte per-cioè non i browser):

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

La parte $document.ready() è il modo jQuery per essere certi che questo codice verrà eseguito quando tutto il corpo è stato caricato, ma poiché stavo usando jQuery sul mio sito ne ho approfittato.

+3

Potresti mostrarmi un esempio di JSFiddle o Plnkr? Non riesco a farlo funzionare e apprezzerei davvero un esempio funzionante. –

62

1) Aggiungere id="ng-app" al tag body.

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

  2) Informare gli utenti/clienti è 2013.

+0

In realtà ho anche provato con id = "ng-app" come alternativa a class = "ng-app" ma nessuno di loro ha risolto il mio problema. Nel mio paese (El Salvador) le persone usano ancora Windows XP e Internet Explorer 6 e 7 sfortunatamente, ma siamo in procinto di convincerli all'aggiornamento. Grazie per la tua risposta. –

+0

'id =" ng-app "' non è da intendersi come alternativa. Entrambi sono necessari, 'ng-app =" myApp "' e 'id =" ng-app "'. – Stewie

+51

+1 per il passaggio 2 ... – Stirling