$ http请求期间延迟忙/加载指示器

Question

I want to implement a very simple Loading directive during $http requests. I want to add a delay, which means that if the promise is returned within a specified time say 1 sec, the indicator is simply not shown to prevent flicker. And it shows only if request/promise takes more than 1 sec. I have tried using $timout as:

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

But it won't help as I know. How can i accomplish this? I have setup this plunk .

Since my directive stays out of ngView. I am using $rootScope and controller to update rootScope parameter "OverlayText" . I would highly appreciate any improvements.

Answer 1

Please don't test syntax :(

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

Probably this should be in a service, but in the meantime, this is working for me.

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

I used to work with angular-busy https://github.com/cgross/angular-busy/blob/master/README.md

On your controller, just provide it with the promise returned from the $http call. You can also set a "min duration" for it, so it will be shown only if the promise wasn't resolve after 1 sec. You can also configure template for it, to design your own "loader" indication.

I works really nice for us.