80

これは 2 つの部分からなる質問です。

  1. $stateProvider.state() 内で resolve プロパティを使用して、コントローラーをロードする前に特定のサーバー データを取得しています。このプロセス中にロード アニメーションを表示するにはどうすればよいですか?

  2. 解決プロパティも利用する子状態があります。問題は、コントローラーをロードする前に、ui-router がすべての解決をファイナライズしようとしているように見えることです。すべての子が解決されるのを待たずに、解決が解決されたら、親コントローラーをロードする方法はありますか? これに対する答えは、おそらく最初の問題も解決します。

4

11 に答える 11

71

編集:これは、テストされ、うまく機能する、さらに簡単なソリューションです:

私のメインコントローラーでは、私は単に持っています

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.showSpinner();
    }
});
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.hideSpinner();
    }
});

これにより、解決する必要のある状態に移行しようとするたびにスピナーが表示され、状態の変更が完了すると非表示になります。状態階層のチェックを追加したい場合があります (つまり、ロードされている親状態が何かを解決する場合はスピナーも表示します) が、この解決策は私にとってはうまくいきます。

参照用および代替手段としての私の古い提案を次に示します。

  1. アプリケーション コントローラーでstateChangeStartイベントをリッスンし、解決中にスピナーを表示する状態に切り替えようとしているかどうかを確認します ( https://github.com/angular-ui/ui-router/wiki/Quickを参照)。 -参照#wiki-events-1 )

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
    if (toState.name == 'state.with.resolve') {
        $scope.showSpinner();  //this is a function you created to show the loading animation
    }
})

  2. コントローラーが最終的に呼び出されたら、スピナーを非表示にできます

    .controller('StateWithResolveCtrl', function($scope) {
    $scope.hideSpinner();
})

イベントをリッスンし$stateChangeError、エラーの処理中にアニメーションを非表示にすることで、解決中に発生した可能性のあるエラーを確認することもできます。

コントローラー間でスピナーのロジックを分散するため、これは完全にクリーンではありませんが、方法です。それが役に立てば幸い。

于 2014-01-26T21:20:46.837 に答える
22

私は完璧に機能する次のソリューションを開発しました。

1. 次の app.run を追加します

app.run(function($rootScope){

    $rootScope
        .$on('$stateChangeStart', 
            function(event, toState, toParams, fromState, fromParams){ 
                $("#ui-view").html("");
                $(".page-loading").removeClass("hidden");
        });

    $rootScope
        .$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams){ 
                $(".page-loading").addClass("hidden");
        });

});

2. ローディング インジケータを ui-view のすぐ上に配置します。id="ui-view" を ui-view div に追加します。

<div class="page-loading">Loading...</div>
<div ui-view id="ui-view"></div>

3. 以下を CSS に追加します。

.hidden {
  display: none !important;
  visibility: hidden !important;
}

ノート：

A. 上記のコードは、2 つのケースで読み込みインジケーターを表示します。

B.Angular アプリが最初にロードされるとき (ビューがロードされる前) にインジケーターを表示したくない場合は、以下のように非表示のクラスをロード div に追加します。

<div class="page-loading hidden">Loading...</div>
于 2014-11-13T14:36:48.720 に答える
8

プロパティが解決されたら、ui-router によって埋められるコンテンツを div に追加するのはどうですか?

あなたのindex.html

<div ui-view class="container">
    Loading....
</div>

プロパティが解決されている間、ユーザーには「読み込み中...」と表示されます。すべての準備が整うと、コンテンツは ui-router によってアプリのコンテンツに置き換えられます。

于 2013-12-04T09:24:23.820 に答える