2014-01-15 5 views
6

Ich habe eine saubere AngularJS 1.2.8 App, die ich gerade beginne. Routing funktioniert nicht mit IE 8, aber es funktioniert in jedem anderen Browser (einschließlich IE 9). In der Konsole sind keine Fehler aufgetreten. Angular feuert einfach nicht ab.Wie bekomme ich AngularJS Routing zum Arbeiten an IE 8

Kann mir jemand in die richtige Richtung zeigen? Ich habe mir schon Angular's IE 8 doc angesehen und die Anweisungen vergeblich verfolgt.

Die HTML ...

<!doctype html> 
<html id="ng-app" data-ng-app="app"> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta charset="utf-8"> 
    <title>Learning Content Portal</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 

    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/main.css"> 
</head> 
<body> 
    <div class="container"> 
     <!-- placeholder for views --> 
     <div data-ng-view></div> 
    </div> <!-- /container --> 

    <script src="js/vendor/jquery-1.10.1.min.js"></script> 
    <script src="js/vendor/json3.min.js"></script> 
    <script src="js/vendor/bootstrap.min.js"></script> 
    <script src="js/vendor/angular/angular.min.js"></script> 
    <script src="js/vendor/angular/angular-route.min.js"></script> 

    <script src="js/app.js"></script> 

</body> 
</html> 

Und die app.js ...

var app = angular.module('app', ['ngRoute']); 

app.config(function ($routeProvider) { 
    $routeProvider 
     .when('/searchCourses', { 
      templateUrl: 'partials/searchCourses.html', 
      controller: 'controller_searchCourses' 
     }) 
     .when('/editCourse', { 
      templateUrl: 'partials/editCourse.html', 
      controller: 'editCourseController' 
     }) 
     .otherwise({ redirectTo: '/searchCourses' }); 
}); 

app.controller('controller_searchCourses', function ($scope) { 
    alert('test'); 
}); 

Es gibt auch eine teilweise, aber ich glaube nicht, dass ist wichtig, weil es die Warnung nie den Schuss (oder Laden der Partiellen).

<div class="container"> 
    <div> 
     Course Count: {{courses.length}} 
     <ul> 
      <li data-ng-repeat="course in courses | orderBy:course.name">{{ course.name }}</li> 
     </ul> 
    </div> 

    <br /> 

    <div> 
     Name: <input type="text" data-ng-model="newCourse.name" /><br /> 
     Owner: <input type="text" data-ng-model="newCourse.owner" /><br /> 
     Code: <input type="text" data-ng-model="newCourse.code" /><br /> 
     Status: <input type="text" data-ng-model="newCourse.status" /><br /> 
     <br /> 
     <button class="btn btn-default" data-ng-click="addCourse()">Add New Course</button> 
    </div> 
</div> 
+0

Keine Aktivierung von IE8-Benutzern! ;) – user3043124

+1

Hah! Ich wünsche. Leider große Unternehmen, langsam zu aktualisieren. – Mark

+0

Ich bin auch ein großes Unternehmen ... und wir haben beschlossen, sie nicht länger zu unterstützen ... sie sind in diesen Tagen bei 5% des Verkehrs – user3043124

Antwort

4

Sie geben nicht Namespace in Ihrem HTML

<html xmlns:ng="http://angularjs.org">

und die docs sagt es erforderlich ist.

+1

Ah ... ein guter Ruf. Ich bin mir nicht sicher, wie ich das vermisst habe. Ich habe es versucht, aber immer noch kein Glück. – Mark

+0

Das hat gut für mich funktioniert. Vielen Dank! – Daniel

1

Ich habe diese Zeile in der Config-Funktion ...

$locationProvider.html5Mode(false); 

..., die nicht geholfen haben. Aber dann bin ich zu Angular 1.2.6 zurückgegangen und es hat funktioniert. Etwas wurde in 1.2.7 eingeführt, das IE 8 Module/Routing bricht.

1

In Angular 1.2.7 wurde eine Änderung eingeführt, die auf IE8 das Routing brach. Hier ist die commit. Es hat es nicht wirklich kaputt gemacht, es ist nur ein Sicherheitskonfigurationsproblem. Wenn Sie zu "Extras -> Internetoptionen -> Erweitert -> Sicherheit -> native XMLHTTP-Unterstützung aktivieren" gehen und es überprüfen, dann funktioniert es wieder.

Wahrscheinlich können Sie nicht nur diese Option für alle Benutzer in Ihrem Firmennetzwerk aktivieren (das war mein Fall), also gibt es 2 Dinge, die Sie tun können.

  • Erste ist Angular 1.2.11 oder höher verwenden. Sie machten another change in dieser Version, die das Routing in ie8 wieder funktionierte. Ich habe noch keine anderen Dinge überprüft, aber ich denke, bei dieser Version sollte alles korrekt funktionieren.
  • Wenn Sie mit Angular 1.2.8 (oder einer beliebigen Version von 1.2.7 bis 1.2.10) bleiben müssen, können Sie diese Indexskripte Ihrem Index hinzufügen.html, nach Angular Laden, dann sollte es wieder funktionieren:

(function() { 
    window.XMLHttpRequest = window.XMLHttpRequest || (function() { 
     return new window.ActiveXObject("Microsoft.XMLHTTP"); 
    }); 
})(); 

+0

Ich habe alles getan, was du gesagt hast und es wird nicht funktionieren. – Blaise

0

Ich denke, es ist etwas falsch mit, wie Sie Ihren Routing schreiben, versuchen Sie dies:

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
     .when('/searchCourses', { 
      templateUrl: 'partials/searchCourses.html', 
      controller: 'controller_searchCourses' 
     }) 
     .when('/editCourse', { 
      templateUrl: 'partials/editCourse.html', 
      controller: 'editCourseController' 
     }) 
     .otherwise({ redirectTo: '/searchCourses' }); 
    }]); 

Wenn das Problem immer noch nicht behoben wird, versuchen Sie Folgendes:

  1. manuell Anfahr-Winkel, den Code unten setzen in Ihrem auf Dokument bereit

    angular.bootstrap(document, ['app']);

  2. Entfernen/Aktualisieren Sie Ihre jquery, irgendwann ist es die jQuery, die nicht kompatibel ist/das Problem verursacht in IE8

Hoffe, das hilft!