AngularJS: событие RouteChangeStart и Success не работает с загрузкой страницы

Question

Я слушаю routeChangeStart и routeChangeSuccess, чтобы показать gid загрузчика во время загрузки маршрута.

ВОПРОС: Это работает нормально, но при загрузке страницы (изменить местоположение) мы имеем проблемы:

1. Время от времени, оба события не срабатывают.
2. Иногда срабатывает только маршрутChangeSuccess.

Смутно, как это решить.

Директива для погрузчика:

signup.directive('loader',['$timeout','$rootScope', function($timeout, $rootScope) { 
    return { 
     restrict: 'E', 
     template: '<div><img style="padding:49% 49%" src="/img/loader.gif" alt="loading..."/></div>', 
     replace: true, 
     link: function (scope, element, attrs) { 
      $timeout(function() { 
       $rootScope.$on('$routeChangeStart', function(event, currentRoute, prevRoute){ 
        element.css({'display':'block'}); 
        element.next().css({'display':'none'}); 
       }); 
       $rootScope.$on('$routeChangeSuccess', function(event, currentRoute, prevRoute){ 
        element.css({'display':'none'}); 
        element.next().css({'display':'block'}); 
       }); 
      }, 0); 
     } 
    } 
}]); 

На странице HTML, у меня есть:

<loader></loader> 
<div ng-view="ng-view"></div> 

И это мой путь конфигурации:

// route config 
signup.config(function ($routeProvider) { 
    $routeProvider 
     .when('/home', { 
      templateUrl: 'agent_home.html', 
      controller: 'agent_homeController', 
      resolve : { 
       properties: function($rootScope) { 
        // return a $http promise 
        return $rootScope.getProperty(); 
       } 
      } 
     }) 
     .when('/profile/agency', { 
      templateUrl: 'edit_agency.html', 
      controller: 'edit_agencyController' 
     }) 
     .when('/screen_tenant', { 
      templateUrl: 'screen_tenant.html', 
      controller: 'screen_tenantController' 
     }) 
     .when('/tenantchat', { 
      templateUrl: 'tenant_chat.html', 
      controller: 'tanantchatController' 
     }) 
     .otherwise({redirectTo: "/home"}); 
}); 

Answer 1

Убрана функция $ таймаут в директиве, и теперь оба события прекрасно работают:

Директива (исправлена)

signup.directive('loader',['$timeout','$rootScope', function($timeout, $rootScope) { 
    return { 
     restrict: 'E', 
     template: '<div><img style="padding:49% 49%" src="/img/loader.gif" alt="loading..."/></div>', 
     replace: true, 
     link: function (scope, element, attrs) { 
       $rootScope.$on('$routeChangeStart', function(event, currentRoute, prevRoute){ 
        element.css({'display':'block'}); 
        element.next().css({'display':'none'}); 
       }); 
       $rootScope.$on('$routeChangeSuccess', function(event, currentRoute, prevRoute){ 
        element.css({'display':'none'}); 
        element.next().css({'display':'block'}); 
       }); 
     } 
    } 
}]); 

Answer 2

Для Дифференцировать изменения маршрута и страницу Перезагрузите, вы можете проверить предыдущий маршрут.

Случай 1. Маршрут Изменить

$rootScope.$on('$routeChangeSuccess', function(event, currentRoute, prevRoute){ 
      //prevRoute!= undefined(You will get value for prevRoute) 
       element.css({'display':'none'}); 
       element.next().css({'display':'block'}); 
      }); 

Случай 1. Page Refresh

$rootScope.$on('$routeChangeSuccess', function(event, currentRoute, prevRoute){ 
      //prevRoute === undefined(prevRoute value will be undefined) 
       element.css({'display':'none'}); 
       element.next().css({'display':'block'}); 
      });