Question

我知道有很多关于此的文章，但我无法找到解决这一特定问题的方法。更改状态时，我希望隐藏当前状态，并在$stateChangeStart上显示微调器，并在$stateChangeSuccess上解析新状态时隐藏微调器。目前，我通过在$ rootScope中将showSpinner值设置为true / false来处理此问题，它在视图中反映出来，就像这样...

    $rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams){
        $rootScope.showSpinner = true;
    })

    $rootScope.$on('$stateChangeSuccess', function(e, toState, toParams, fromState, fromParams){
        $rootScope.showSpinner = false;
    })

查看：

<div class="spinner" ng-if="showSpinner"></div>
<div ng-if="!showSpinner" ng-show="$state.includes('rulebook.text-view')" ui-view="text-view"></div>
<div ng-if="!showSpinner" ng-show="$state.includes('rulebook.rules')" ui-view="rules"></div>
<div ng-if="!showSpinner" ng-show="$state.includes('rulebook.vocab')" ui-view="vocab"></div>

截至目前，$ stateChangeStart正在按我的意愿行事，但是在$ stateChangeSuccess上解析了新视图并且内容已经呈现后，删除微调器有一个很好的延迟。无法真正理解为什么会这样。我将不胜感激任何帮助。

Answer 1

您是否尝试过角度路由器用户指南中提到的$viewContentLoaded事件？

在$ stateChangeSuccess之后延迟隐藏加载程序图标

1 个答案: