我正在开发一个使用 Ionic 框架的应用程序,我想在其中显示加载纺车直到数据从 API 完全加载
Controller.js
.controller('PrayersCtrl', function($scope,Prayers,$ionicLoading,$timeout) {
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
$scope.prayers = Prayers.query();
$ionicLoading.hide();
})
和 Services.js
angular.module('starter.services', [])
.factory('Prayers', function($resource) {
return $resource(base_url+'/wp/v2/posts');
});
在这种情况下,Spinning wheel 甚至不显示,(我的意思是它非常快,以毫秒为单位显示和消失)。比加载数据需要时间,同时它显示空白页面直到加载数据。我想显示纺车,直到数据加载到页面中。
已编辑
我也在 controller.js 中尝试过超时
.controller('PrayersCtrl', function($scope, $stateParams,Prayers,$ionicLoading,$timeout) {
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
$timeout(function () {
$ionicLoading.hide();
$scope.prayers = Prayers.query();
}, 2000);
})
但在这种情况下,旋转轮在 2000 毫秒后消失,如代码所示; 我想旋转代码直到数据加载完成。
最佳答案
在 controller.js 中,我在查询后添加了一个 $promise 并进行了一些更改以在出现网络错误时显示消息
.controller('PrayersCtrl', function($scope,Prayers,$ionicLoading,$timeout) {
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
$scope.prayers = Prayers.query().$promise.then(function(result){
console.log(result);
$scope.prayers=result;
$ionicLoading.hide();
}, function(error){
console.log(error);
$ionicLoading.hide();
$ionicLoading.show({
template: 'Network Error',
scope: $scope
});
$timeout(function() {
$ionicLoading.hide();
}, 2000);
})
})
并使服务恢复原状
angular.module('starter.services', [])
.factory('Prayers', function($resource) {
return $resource(base_url+'/wp/v2/posts');
});
关于javascript - 显示 ionic 加载直到数据加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36302921/