AngularJS：RouteChangeStartとSuccessイベントがページロードで機能しない

Question

ルートのロード中に、routeChangeStartとrouteChangeSuccessがローダーgifを表示するのを聞いています。これは正常に動作しますが、ページのロード時（場所の変更）我々は問題持っている ：

ISSUE時には

1. を、両方のイベントは発生しません。
2. routeChangeSuccessだけが起動することがあります。

これを解決する方法が混乱しています。ローダーの

指令：HTMLページで

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

、私が持っている：

<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ページの更新

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