web-dev-qa-db-ja.com

Angular js-新しいルートごとに読み込み中のgifを表示/非表示

新しいルートごとに読み込みGIFを切り替え（非表示/表示）しようとしているので、ロジックは次のようになります。

  • routeChangeStart =読み込み中のgifを表示
  • routeChangeSuccess =読み込み中のgifを非表示

これは私のコードです：

//ANGULAR
app.run(function($rootScope) {

   $rootScope.layout = {};
   $rootScope.layout.loading = false; 

   $rootScope.$on('$routeChangeStart', function() {

      //show loading gif
      $rootScope.layout.loading = true;

   });

   $rootScope.$on('$routeChangeSuccess', function() {

      //hide loading gif
      $rootScope.layout.loading = false;

   });

   $rootScope.$on('$routeChangeError', function() {

       //hide loading gif
       alert('wtff');
       $rootScope.layout.loading = false;
   });
});

// HTML

<img src="img/loading.gif" ng-hide="!layout.loading"/>

これは変更された3/4ルートで機能し、ルートの変更中に機能を停止するため、奇妙です：O

それは何でしょうか？

ここIS @Rob Sedgwickのおかげでライブの例： http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b

javascriptangularjstoggleloadingroutes
21
itsme

短い答え：$rootScope.layout.loadingは期待どおりに変更されました。ただし、テンプレートが読み込まれている場合、ブラウザには変更を表示する時間がありません。

長い答え：console.logリスナーに$on出力を入れた場合$routeChangeStartイベントが発生し、テンプレートが読み込まれ、その後$routeChangeSuccessが発生することがわかります。内部では、次のことが起こります。

  • $routeChangeStart火災
  • $rootScope.layout.loadingはtrueになります
  • テンプレートは非同期で読み込まれます
  • dOMが更新されます
  • ブラウザは読み込み中のgifをレンダリングします

少し後で（xhrリクエストが返されます）

  • テンプレートが読み込まれました
  • $routeChangeSuccess火災
  • $rootScope.layout.loadingはfalseになります
  • dOMが更新されます
  • ブラウザにgifが表示されなくなりました

tmeplateがキャッシュされた場合はどうなりますか：-$routeChangeStartが発生します-$rootScope.layout.loadingがtrueになります--$routeChangeSuccessが発生します--$rootScope.layout.loadingがfalseになります- DOMが更新されます（ただし、これは以前と同じ状態です）

ご覧のとおり、ブラウザにDOMをレンダリングする時間を与えるために中断されていないスクリプトが実行されているため、ブラウザは新しい状態をレンダリングできません。テンプレートがまだロードされていない場合、ajaxリクエストはスクリプトの実行を停止し、ブラウザにDOMをレンダリングする時間を与えます。

これを修正する方法は？

ブラウザにDOMを更新する時間を与えるtimeoutを使用できます。

$rootScope.$on('$routeChangeSuccess', function () {
    console.log('$routeChangeSuccess');
    //hide loading gif
    $timeout(function(){
      $rootScope.layout.loading = false;
    }, 200);
});

このソリューションを使用したプランカーは次のとおりです。 http://plnkr.co/edit/MkREo0Xpz5SUWg0lFCdu?p=preview

23
michael

（コメントを入れるには少し多すぎます）

コードを設定したところ、読み込み変数が毎回更新されておらず、テンプレートのキャッシュが原因であることがわかりました。「RouteChange」はトリガーされていないと思います。

テンプレートキャッシュを無効にすると、コードが毎回実行されます。

app.run(function($rootScope, $location, $anchorScroll, $routeParams,$templateCache) {

   $rootScope.$on('$viewContentLoaded', function() {
       $templateCache.removeAll();
    });

   ....
3
Rob Sedgwick