$ 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秒後沒有解決時纔會顯示。 您也可以爲其配置模板，以設計您自己的「加載程序」指示。

我對我們真的很好。