Ajax spinners for angularJS

Question

我試圖在每個http調用中顯示ajax spinners在angularJS應用程序之一上，所以它意味着每當我們嘗試加載ngGrid或Dropdown等時，都會有一個微調框，並且當加載完成時將被刪除，我是新的角度不知道我們怎麼能實現它，請給任何參考。

感謝

Answer 1

你可以寫一些老式的JavaScript調用前一個類名添加到DIV或TABLE來$http.foo，然後在成功/失敗的回調刪除類名。

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> 

在您的控制器這樣，你可以做些什麼如：

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