Как показать значок загрузки в AngularJS после количества секунд?

Question

Я хочу показать значок загрузки, если любой HTTP-запрос занимает больше 2 секунд. Я использую этот код, чтобы показать значок загрузки мгновенно, когда запрос HTTP сделан:

<div data-loading id="divLoading"> 
    <img src="http://loadinggif.com/images/image-selection/3.gif" /> 
</div> 

<script> 
app.directive('loading', ['$http', function ($http) { 
    return { 
     restrict: 'A', 
     link: function (scope, elm, attrs) { 
      scope.isLoading = function() { 
       return $http.pendingRequests.length > 0; 
      }; 

      scope.$watch(scope.isLoading, function (v) { 
       if (v) { 
        elm.show(); 
       } else { 
        elm.hide(); 
       } 
      }); 
     } 
    } 
}]); 
</script> 

Примечание: Я новичок с AngularJS.

Как это сделать?

Answer 1

Вы можете использовать директиву this spinner. Вы можете установить в качестве узлового модуля также:

npm install angular-spinners 

Использование

<spinner name="testSpinner" 
img-src="http://loadinggif.com/images/image-selection/3.gif"></spinner> 

Script

**This script won't work here.So i have added a working plunk.** 

angular.module("myApp",['angularSpinners']) 
 
.controller('ctr1', function($scope,sample, spinnerService){ 
 
    setLoading(true, "testSpinner"); 
 
    sample.sampleFn().then(function(data){ 
 
    $scope.data=data; 
 
    setLoading(false, "testSpinner"); 
 
    }) 
 
    
 
    function setLoading(loading, element) { 
 
     if (loading) { 
 
      spinnerService.show(element); 
 
     } else { 
 
      spinnerService.hide(element); 
 
     } 
 
    } 
 
}) 
 
.factory('sample', function($http){ 
 
    return { 
 
    sampleFn : sampleFn 
 
    } 
 
    
 
    function sampleFn(){ 
 
    return $http.get('response.json').then(function(response){ 
 
     return response.data; 
 
    }, function(){ 
 
     $q.reject("Failed"); 
 
    }) 
 
    } 
 
})

Sample Working Plunk

Answer 2

Шаг 1: Нанести задержку функции всякий раз, когда происходит запрос HTTP.
Шаг 2: Возьмите переменную и определите ее как ложную в начале и попытайтесь сделать истину после получения ответа HTTP.
Шаг 3: После 2 секунд задержки оценивает указанную выше переменную, если она ложна, означает, что она загружается внутри функции шага 1.