시간 (초) 후에 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 지시문을 사용할 수 있습니다.

**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"); 
 
    }) 
 
    } 
 
})

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

스크립트를

npm install angular-spinners 

사용법 : 또한 노드 모듈로 설치할 수 있습니다

Sample Working Plunk

Answer 2

1 단계 :는 HTTP 요청 갈 때마다 함수에 지연을 적용합니다.
2 단계 : 변수를 가져 와서 시작시 false로 정의하고 http 응답을받은 후 true로 만듭니다.
3 단계 : 지연이 2 초 후에 위의 정의 된 변수가 거짓이면 1 단계 함수 내에서로드 표시를 의미합니다.