$ 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秒后没有解决时才会显示。 您也可以为其配置模板，以设计您自己的“加载程序”指示。

我对我们真的很好。