Question

我正在收听routeChangeStart和routeChangeSuccess，以便在加载路径时显示加载程序gif。

ISSUE： 这工作正常，但当页面加载（位置更改）时，我们遇到了问题：

有时，两个事件都不会发生。
有时候只会触发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

要区分路线更改和Page Reload，您可以检查以前的路线。

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

Answer 2

删除了指令中的$timeout函数，现在两个事件都正常工作：

指令（更正）

signup.directive('loader',['$timeout','$rootScope', function($timeout, $rootScope) {
    return {
        restrict: 'E',
        template: '<div><img 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'});
            });
        }
    }
}]);

RouteChangeStart和RouteChangeSuccess事件在页面加载时无效

2 个答案: