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

Question

Пожалуйста, я использую UI-роутер в моем проекте. $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

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

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

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

Answer 2

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

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