angularjs - $stateChangeSuccess 后隐藏加载程序图标的延迟

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事件？