Question

我想在 $ http 请求期间实现一个非常简单的Loading指令。我想添加一个延迟，这意味着如果承诺在指定的时间内返回，比如1秒，则指示器只是未显示以防止闪烁。它仅在请求/承诺超过1秒时显示。我尝试使用 $ timout 作为：

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

但据我所知，它无济于事。我怎么能做到这一点？我已设置此plunk。

因为我的指令不在ngView之内。我使用$ rootScope和controller来更新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秒后答案没有解决时才会显示。您还可以为其配置模板，以设计自己的“加载器”指示。

我的工作非常好。

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

3 个答案: