angularJS 용 Ajax 스피너

Question

모든 http 호출과 함께 angularJS 어플리케이션 중 하나에 ajax 스피너를 표시하려하고 있으므로 ngGrid 또는 드롭 다운 등을로드하려고 할 때마다 스피너가 있고로드가 완료되면이를 의미합니다 제거 될 것이다, 나는 모호한에 새롭다 우리는 어떻게 그것을 달성 할 수 있는지, 어떤 참고든지주십시오.

감사

Answer 1

당신은 $http.foo에 호출하기 전에 DIV 또는 표에 클래스 이름을 추가하는 몇 가지 평범한 오래된 자바 스크립트를 작성하고 성공/실패 콜백 클래스 이름을 제거 할 수 있습니다.

CSS :

.loading { 
    background: transparent url(path/to/loading.gif) no-repeat scroll 50% 50%; 
} 

.loading * { 
    visibility: hidden; 
} 

Answer 2

그래서 기본적으로이 같은 것, 두 개의 템플릿을 바꿀 것 ngSwitch를 사용해보십시오 :

<div ng-switch on="loaded"> 
    <div ng-switch-when="true"> 
     <!--your loaded content goes here--> 
    </div> 
    <div ng-switch-default> 
     <!--your spinner goes here--> 
    </div> 
</div> 

당신이 뭔가를 할 수있는 컨트롤러에서 그 방법 like :

$scope.loadSomething = function(){ 
    $scope.loaded = false; 
    $http.get(url).success(function(data){ 
     $scope.loaded = true; 
    }); 
};