ajax 템플릿 용 앵귤러 및 프리 로더

Question

대시 보드에 여러 템플릿이 있습니다.

템플릿 중 하나에 간단한 목록이 있습니다. 내 li에 ng-repeat을 사용하고 있습니다. 그런 식으로 내 목록을 동적으로 유지합니다. 하지만 여기에있는 것이 있습니다 -

$http을 사용하여이 목록의 데이터를 얻었으므로 두 번째 또는 두 번째 빈 목록이있을 수 있습니다.

좋은 해결책은 기본적으로 내 목록에 프리 로더를 추가하는 것이지만 논리를 추가하는 방법을 제안 하시겠습니까? 가장 쉬운 방법은 다음과 같이 추가하는 것입니다.

$http({ 
    method: 'GET', 
    url: './data/websites.json' 
}).then(function successCallback(response) { 
    // hide preloader, etc 
}); 

올바른 방법일까요?

또한 템플릿 변환을 제어 할 수 있습니까? 사용자가 페이지를 떠날 때, 예를 들어, 나는 X 밀리 초에 대한 프리 로더를 보여주고 싶은, 단지 다음 요청 된 페이지

Answer 1

지시를하는 것이 좋습니다로 이동하지 당신을 위해 모든 것을 :

angular.module('directive.loading', []) 

    .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(); 
        } 
       }); 
      } 
     }; 

    }]); 

이 지시어를 사용하면 로딩 애니메이션 요소에 '로딩'속성을 부여하기 만하면됩니다.

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>