我有一个简单的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时,有时可能需要一段时间来加载数据,例如：
<div>
<a>Countries</a> : {{Countries.length}}
</div>
Angular是否有某种形式的等待/加载图标,我可以在DIV中的数据被填充时显示？
理想情况下,它是轻量级的,并且不需要加载库(我的应用程序也使用jQuery)
谢谢
解决方法
这是我通常的做法.对于OZ_而言,这需要
Font Awesome.< i>类fa fa-spinner fa-spin是对该库的引用.
使用ng-hide和ng-show来控制将包含填充数据的微调器和元素的可见性.
<p class="text-center" ng-hide="dataLoaded">
<i class="fa fa-spinner fa-spin"></i>
</p>
<div ng-show="dataLoaded">
<a>Countries</a> : {{Countries.length}}
</div>
JS
在通话之前,将$scope.dataLoaded设置为false.然后,在您的成功块中,将其设置为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');
});
}
}
});
