javascript - RouteChangeStart 和 RouteChangeSuccess 事件在页面加载时不起作用

Question

我正在监听routeChangeStart和routeChangeSuccess以在加载路线时显示加载器gif。

问题:这工作正常，但是当页面加载(位置更改)时，我们遇到问题:

1. 有时，这两个事件都不会触发。
2. 有时，routeChangeSuccess 会单独触发。

不知道如何解决这个问题。

加载器指令:

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

要区分路线更改和页面重新加载，您可以检查之前的路线。

案例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'});
           });