AngularJS – 在等待数据/数据计算时加载图标

我有一个简单的Angular http.get：

app.factory('countriesService', function($http) { return { getCountryData: function(done) { $http.get('/resources/json/countries.json') .success(function(data) { done(data);}) .error(function(error) { alert('An error occured'); }); } } }); 

示例.JSON：

 { "NoCities": 66, "Balance": 2103, "Population": 63705000, "CityInfo": [ { "CityName": "London", "CityPopulation": "7825200", "Facts": { "SubFact1": "xzy", "SubFact2": "xzy", "SubFact3": "xzy", "SubFact4": "xzy", "SubFact5": "xzy" }, }, { "CityName": "Manchester", "CityPopulation": "2584241", "Facts": { "SubFact1": "abc", "SubFact2": "abc", "SubFact3": "abc", "SubFact4": "abc" }, } ], "SubmitInfo": null, "FormAction": null, "FormController": null, } 

我注意到当我的页面执行.length时，有时可能需要一段时间来加载数据，例如：

 
 Countries : {{Countries.length}}  

Angular是否有某种forms的等待/加载图标，我可以在DIV中的数据被填充时显示？

理想情况下，它是轻量级的，并且不需要加载库（我的应用程序也使用jQuery）

谢谢

Answer 1

这是我通常的做法。 对OZ_来说，这需要Font Awesome 。 的类fa fa-spinner fa-spin是对该库的引用。

虽然，您也可以选择显示/隐藏指示加载的.gif 。

标记

使用ng-hide和ng-show控制将包含填充数据的微调器和元素的可见性。

 
  
 
 Countries : {{Countries.length}}  

JS

在通话之前，将$scope.dataLoaded设置为false 。 然后，在您的success块中，将其设置为true 。 另外值得注意的是，您需要将$scope传递给您的工厂。

 app.factory('countriesService', function($http, $scope) { return { getCountryData: function(done) { $scope.dataLoaded = false; $http.get('/resources/json/countries.json') .success(function(data) { done(data); $scope.dataLoaded = true; }) .error(function(error) { alert('An error occured'); }); } } }); 

Answer 2

AngularJS不是CSS框架。 你可以在FontAwesome的TWBS中找到加载图标： http ：//fortawesome.github.io/Font-Awesome/examples/#spinning