$stateChangeStart don't work when user refresh browser

问题

Please, I'm using ui-router on my project. $stateChangeStart event work fine when the user navigate between the states. But it doesn't work if I refresh the browser.

This is my source code:

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

my layout file

<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>

回答1:

A user refresh does not fire $stateChangeStart or $stateChangeSuccess. However $viewContentLoading and $viewContentLoaded does fire.

So can you try the following:

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

回答2:

Try this,
Here if you change your state you can see your state in console but if you reload your page it will reload the state

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

来源：https://stackoverflow.com/questions/35658296/statechangestart-dont-work-when-user-refresh-browser

标签

angularjs

events

angular-ui-router

state