我正在尝试使用 $ionicLoading与 Angular UI Router resolves .这个想法是,当请求新的路线/状态时,加载模式会在解析数据时出现,然后在解析完成并实例化新状态时消失。
路由器
.state('tab.locations', {
url: '/locations',
cache: false,
views: {
'locations-tab': {
templateUrl: 'js/locations/tab-locations.html',
controller: 'LocationsCtrl as vm'
}
},
resolve: {
locationsResource: 'Locations',
locations: function(locationsResource) {
return locationsResource.all();
}
}
})
如果没有解析,一种推荐的方法是使用 $httpProvider.interceptors
广播事件来显示和隐藏加载屏幕。像这样:
$ionicConfigProvider
$httpProvider.interceptors.push(function($rootScope) {
return {
request: function(config) {
$rootScope.$broadcast('loading:show');
return config
},
response: function(response) {
$rootScope.$broadcast('loading:hide');
return response
}
}
})
运行 block
$rootScope.$on('loading:show', function() {
$ionicLoading.show({template: '<ion-spinner></ion-spinner>'})
});
$rootScope.$on('loading:hide', function() {
$ionicLoading.hide()
});
这在不使用解析时效果很好。但是当解决工作时,加载屏幕不再出现。
如果存在解析,我尝试在 $stateChangeStart
上广播 loading:show
,但这也不起作用。
是否有其他拦截器或状态更改事件我应该广播 loading:show
和 loading:hide
以使 $ionicLoading
可以使用解决?
最佳答案
我最近遇到了这个问题,这在运行 block 中对我有用:
$rootScope.$on('loading:show', function () {
$ionicLoading.show({
template:'Please wait..'
})
});
$rootScope.$on('loading:hide', function () {
$ionicLoading.hide();
});
$rootScope.$on('$stateChangeStart', function () {
console.log('please wait...');
$rootScope.$broadcast('loading:show');
});
$rootScope.$on('$stateChangeSuccess', function () {
console.log('done');
$rootScope.$broadcast('loading:hide');
});
我在 Ionic 论坛上找到了它 here
关于javascript - $ionicLoading 与 Angular UI Router 解析,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29703076/