2014-01-15 5 views
6

У меня есть чистое приложение AngularJS 1.2.8, которое я только начинаю. Маршрутизация не работает на IE 8, но она работает в любом другом браузере (включая IE 9). В консоли нет ошибок. Угловое просто не сгорит.Как получить AngularJS-маршрутизацию для работы в IE 8

Может кто-нибудь указать мне в правильном направлении? Я уже смотрел на Angular's IE 8 doc и следил за направлением безрезультатно.

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> 

И 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'); 
}); 

Там также частичный, но я не думаю, что имеет значение, потому что он никогда не стреляя предупреждения (или загрузка частичного).

<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

Без учета пользователей IE8! ;) – user3043124

+1

Hah! Я хочу. К сожалению, крупные корпоративные, медленные обновления. – Mark

+0

Я тоже большой корпоративный ... и мы просто решили больше не поддерживать их ... в эти дни они как бы 5% трафика – user3043124

ответ

4

Вы не указали пространство имен в вашем HTML

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

и документы говорят, что это необходимо.

+1

А ... хороший звонок. Не знаю, как я это пропустил. Пробовал, но все равно не повезло. – Mark

+0

Это отлично подойдет для меня. Благодаря! – Daniel

1

Я добавил эту строку в функции конфигурации ...

$locationProvider.html5Mode(false); 

... что не помогло. Но затем я отступил к Angular 1.2.6, и это сработало. Что-то было введено в 1.2.7, которое разбивает модули IE 8/маршрутизацию.

1

Было внесено изменение в Angular 1.2.7 такого рода сломанной маршрутизации на IE8. Вот commit. Это действительно не нарушило его, это проблема безопасности. Если вы перейдете в «Инструменты -> Параметры Интернета -> Дополнительно -> Безопасность -> Включить собственную поддержку XMLHTTP» и проверьте его, то он снова работает.

Возможно, вы не можете включить эту опцию только для всех пользователей вашей корпоративной сети (это было мое дело), ​​так что вы можете сделать 2 вещи.

  • Первый использует Angular 1.2.11 или новее. Они сделали another change в той версии, которая сделала маршрутизацию в ie8 снова. Однако не проверял другие вещи, но я полагаю, что все должно работать правильно на этой версии.
  • Если вам нужно придерживаться Angular 1.2.8 (или любой версии от 1.2.7 до 1.2.10), вы можете добавить эти теги внутри сценария в свой индекс.HTML, после загрузки Угловое, то он должен работать снова:

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

+0

Я сделал все, что вы сказали, и это не сработает. – Blaise

0

Я думаю, что есть что-то не так с тем, как вы пишете свой маршрут, попробуйте следующее:

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' }); 
    }]); 

Если вышеуказанное не решило проблему, попробуйте следующее:

    запуск
  1. вручную угловой, поместите следующий код внутри вашего на документе готового

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

  2. Remove/Обновление JQuery, иногда это JQuery, которая несовместима/вызывает проблемы в IE8

Надеюсь, это поможет!

Смежные вопросы