$ httpリクエスト中に遅延ビジー/ローディングインジケータ

Question

$ httpリクエストの間、非常に単純なロードディレクティブを実装したいと思います。私は遅延を追加したい、つまり、約束が1秒と指定された時間内に返された場合、インジケータは単にと表示されず、ちらつきを防ぐためにと表示されません。また、要求/約束が1秒以上かかる場合にのみ表示されます。私はとして$ TIMOUTを使用して試してみました：

if (_delay) { 
    $timeout(function() { 
     scope.$root.ShowOverlay = true; 
    }, 1000); 
} 

しかし、私が知っているとして、それは助けにはなりません。どのように私はこれを達成することができますか？私はこのplunkをセットアップしました。

私の指示はngViewのままです。私は$ rootScopeとコントローラを使ってrootScopeパラメータ"OverlayText"を更新しています。改善に感謝します。

Answer 1

おそらくこれはサービスであるべき

function getData(){ 
    $scope.data = null; 
    $httpCall("url/properties",functionCallback(response){ 
     $scope.data = response; 
     scope.$root.ShowOverlay = false; 
     return $scope.data; 
    }); 
    $timeout(function(){ 
     if($scope.data != null) 
     { 
      scope.$root.ShowOverlay = true; 
     } 
    },1000); 
} 

getData(); 

Answer 2

:(構文をテストしないでください、しかしその間に、これは私のために働いている。

myApp.controller('MainCtrl', function($scope, $http, $rootScope, $timeout) {  
    var getData = function() { 
    $rootScope.OverlayText = 'Loading'; 
    var isLoading = true; 
    $timeout(function(){ 
     isLoading = false; 
     $rootScope.ShowOverlay = true; 
    },1000); 
    $http.get('https://api.github.com/users/potherca/repos?per_page=100', { 
     cache: false 
     }) 
     .then(function(_resp) { 
     //This timeout is only for testing, not always the response take longer than 1 sec. 
     $timeout(function(){ 
      isLoading = false; 
      $scope.datajson = _resp.data; 
      $rootScope.ShowOverlay = false; 
     },2500); 
     }); 
    }(); 

}); 

https://plnkr.co/edit/3bEfka4KQZYoIj0GNgA7?p=preview

Answer 3

私は忙しかった仕事をしていました。 https://github.com/cgross/angular-busy/blob/master/README.md

あなたのコントローラでは、$ http呼び出しから返された約束を提供するだけです。 また、「最小継続時間」を設定することもできます.1秒後に約束が解決されなかった場合にのみ表示されます。 テンプレートを設定して、独自の「ローダ」表示をデザインすることもできます。

私は本当にうってつけです。