ajaxテンプレート用の角度とプリローダー

Question

私はいくつかのテンプレートを持つダッシュボードを持っています。

テンプレートの1つでは、私は単純なリストを持っています。私はliの上にng-repeatを使用しています。そのようにして私のリストを動的に保ちます。 しかし、ここには -

$httpを使ってこのリストのデータを取得しているので、2番目または2番目の空のリストがある可能性があります。

このための良い解決策は、デフォルトで私のリストのプリローダーを追加することですが、そのロジックを追加するにはどのように提案しますか？最も簡単な方法は、次のように追加することです：

$http({ 
    method: 'GET', 
    url: './data/websites.json' 
}).then(function successCallback(response) { 
    // hide preloader, etc 
}); 

これは正しい方法でしょうか？

また、テンプレートの移行を制御するにはどうしてですか？例えば、ユーザは、私はXのミリ秒のためのプリローダーを表示したいページを残し、そしてだけにして、要求されたページ

Answer 1

に移動するとき、ディレクティブはあなたのためにすべてを行い持っている方が良いです：

angular.module('directive.loading', []) 

    .directive('loading', ['$http' ,function ($http) 
    { 
     return { 
      restrict: 'A', 
      link: function (scope, elm, attrs) 
      { 
       scope.isLoading = function() { 
        return $http.pendingRequests.length > 0; 
       }; 

       scope.$watch(scope.isLoading, function (v) 
       { 
        if(v){ 
         elm.show(); 
        }else{ 
         elm.hide(); 
        } 
       }); 
      } 
     }; 

    }]); 

このディレクティブを使用すると、あなたがする必要があるすべては、任意の負荷アニメーション要素に「ロード」属性を与えることです：

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>