$ stateChangeStart не работает, когда пользователь обновляет браузер

Question

Я использую ui-router в своем проекте. $stateChangeStart Событие отлично работает, когда пользователь перемещается между состояниями. Но это не работает, если я обновляю браузер.

Это мой исходный код:

(function(){ 
'use strict'; 

angular.module('app.overlay') 
    .directive('ibLoading', ['$rootScope' , '$timeout', loading]); 

    function loading($rootScope , $timeout){ 
     console.log("In dirrective"); 
     var directive = { 
      restrict:'EAC', 
      link:link 
     }; 

     function link(scope, element) { 

      $rootScope.$on('$stateChangeStart', function() { 
        $timeout(function(){ 
         element.addClass('show'); 
        } , 50); 
       }); 

       $rootScope.$on('$stateChangeSuccess', function() { 
        $timeout(function(){ 
         element.removeClass('show'); 
        } , 700); 
       }); 

     } 

     return directive; 
    } 
})(); 

моего файл макет

<div ng-controller="ShellController as vm"> 
<header class="clearfix"> 
    <ht-top-nav navline="vm.navline"></ht-top-nav> 
</header> 
<section id="content" class="content"> 
    <!--<div ng-include="'app/layout/sidebar.html'"></div>--> 
    <div ui-view></div> 
    <div class="ib-loading">Loading ...</div> 
</section> 
</div> 

Answer 1

Попробуйте это
Здесь, если вы измените свое состояние вы можете увидеть свое состояние в консоли, но если вы перезагрузите ваш страница перезагрузит состояние

$rootScope.$on('$stateChangeStart', function (event, toState, toParams) { 
    console.log("Switching To: ", toState.name); 
}); 

Answer 2

Обновлено пользователем не запускает $ stateChangeStart или $ stateChangeSuccess. Однако $ viewContentLoading и $ viewContentLoaded Удар.

Так вы можете попробовать следующее:

  $rootScope.$on('$viewContentLoading', function() { 
       $timeout(function(){ 
        element.addClass('show'); 
       } , 50); 
      }); 
      $rootScope.$on('$viewContentLoaded', function() { 
       $timeout(function(){ 
        element.removeClass('show'); 
       } , 700); 
      });