我的Angular应用程序包括一个主屏幕和几个标签,我正在使用$stateProvider
来切换状态。每当我离开tab(= state)时,我必须执行异步操作。我想在实际移动到新选项卡之前等待该操作完成。有点像resolve
离开状态而不是进入时完成。
如何实现这一目标?
示例摘录
$stateProvider
.state('myproject.main', {
url: '/main',
templateUrl: '...',
controller: 'MainCtrl'
})
.state('myproject.tabs.a', {
url: '/tab_a',
controller: 'TabACtrl',
templateUrl: '...',
onExit: doSave
})
.state('myproject.tabs.b', {
url: '/tab_b',
controller: 'TabBCtrl',
templateUrl: '...',
onExit: doSave
});
function doSave(MyService) {
return MyService.save(); //async, promise
}
这里我想在标签之间切换时保存(异步)。但是当从选项卡进入主状态时,我想确保保存已完成(在myproject.main
上执行保存onEnter / resolve对我不利)。
问题:输入myproject.main
(MainCtrl)时,异步MyService.save()操作仍在处理中。我希望它能够完成/解决。
我尝试使用以下代码破解它,但不起作用 - 状态更改进入循环
.run(function($rootScope, $state, $stateParams, MyService){
$rootScope.$on('$stateChangeStart', function(ev, toState, toParams, fromState, fromParams){
if (toState.name === 'myproject.main' && //switching to main
fromState.name && //for a certain tab
fromParams.resume !== true ) {
ev.preventDefault(); //stop the state change
//do the save and then continue with the state change
MyService.save().then(function(){
$state.go(toState, {resume: true}) //continue with a "resume" parameter
});
}
});
});
谢谢!