用户刷新浏览器时 $stateChangeStart 不起作用 [英] $stateChangeStart don't work when user refresh browser

问题描述

请，我在我的项目中使用 ui-router.$stateChangeStart 事件在用户在状态之间导航时正常工作.但是刷新浏览器就不行了.

这是我的源代码:

(function(){'使用严格';angular.module('app.overlay').directive('ibLoading', ['$rootScope', '$timeout', loading]);函数加载($rootScope，$timeout){console.log("在指令中");var 指令 = {限制:'EAC'，链接:链接};功能链接(范围，元素){$rootScope.$on('$stateChangeStart', function() {$超时(功能(){element.addClass('show');} , 50);});$rootScope.$on('$stateChangeSuccess', function() {$超时(功能(){element.removeClass('show');} , 700);});}返回指令；}})();

我的布局文件

<header class="clearfix"><ht-top-nav navline="vm.navline"></ht-top-nav></标题><section id="content" class="content"><!--<div ng-include="'app/layout/sidebar.html'"></div>--><div ui-view></div><div class="ib-loading">加载中...</div></节>

解决方案

用户刷新不会触发 $stateChangeStart 或 $stateChangeSuccess.但是 $viewContentLoading 和 $viewContentLoaded 确实会触发.

那么您可以尝试以下操作吗:

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

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>

解决方案

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

这篇关于用户刷新浏览器时 $stateChangeStart 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！