AngularJS - 加载图标,而等待数据/数据计算 [英] AngularJS - Loading icon whilst waiting for data/data calculation
问题描述
我有一个简单的角度http.get:
I have a simple 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:
Example .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,
}
我注意到,当我的页面进行。长度,有时可能需要一段时间的数据加载,例如:
I've noticed when my page is performing a .length, sometimes it can take a while for the data to load, for example:
<div>
<a>Countries</a> : {{Countries.length}}
</div>
角是否有某种形式的等待/加载图标的,我可以证明,而该数据在DIV被填充?
Does Angular have some form of waiting/loading icon that i could show whilst the data in the DIV is being populated?
在理想情况下的东西重量轻,这并不需要一个库(我的应用程序使用jQuery太)
Ideally something lightweight and that doesnt require a library to be loaded (my application is using jQuery too)
感谢
推荐答案
这是我的一贯做法。要OZ_的角度来看,这需要字体真棒。在&LT; I&GT;的
类发发微调发旋
是该库的引用
This is my usual approach. To OZ_'s point, this requires Font Awesome. The <i>
's classes fa fa-spinner fa-spin
are a reference to that library.
虽然,你也可以选择显示/隐藏 .gif注意:
指示加载。
Although, you could also opt to show/hide a .gif
that indicates loading.
使用 NG-隐藏
和 NG-节目
来控制微调和元素将包含人口的知名度数据。
Using ng-hide
and ng-show
to control visibility of the spinner and element that will contain your populated data.
<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
到假
。然后,你的成功
块中,将其设置为真正
。另外值得一提的,您需要 $范围
传递给你的工厂。
JS
Before your call, set $scope.dataLoaded
to false
. Then, within your success
block, set it to true
. Also worth noting you'll need to pass $scope
to your factory.
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');
});
}
}
});
这篇关于AngularJS - 加载图标,而等待数据/数据计算的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!