0

これについて多くのことが書かれていることは知っていますが、この特定の問題の解決策を見つけることができません。状態を変更するときは、現在の状態を非表示にして にスピナーを表示し$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 で新しいビューが解決され、コンテンツがレンダリングされた後、スピナーを削除するのにかなりの遅延があります。なぜこれが起こっているのか本当にわかりません。助けていただければ幸いです。

4

1 に答える 1