我有一个抽象的配置文件状态,它有多个子状态(对于配置文件页面的不同选项卡),然后我想让另一个子配置文件状态为模态.我已经实现了这样的事情：
$stateProvider
.state('profile',{
url: '/profile/:profileID',templateUrl: 'profile.html',controller: 'ProfileCtrl',abstract:true,resolve: {
user: ...
}
})
.state('profile.circles',{
url: '',templateUrl: 'profilecircles.html',controller: 'profilecirclesCtrl',resolve: { circle: ... }
})
.state('profile.squares',{
url: '/collections',templateUrl: 'profilesquares.html',controller: 'profilesquaresCtrl',resolve: { squares: ... }
})
.state('profile.editprofile',{
url: '/edit',onEnter: ['$window','$modal',function($window,$modal) {
$modal.open({
templateUrl: 'editprofile.html',controller: 'editProfileCtrl',resolve: {
user: ...
}
}).result.then(function() {
$window.history.back();
},function() {
$window.history.back();
});
}]
})
这很有效,除了因为editprofile是正方形和圆形的兄弟,当该状态处于活动状态并且模态处于视图中时,正方形或圆形状态被卸载,并在模态关闭时再次加载.
当profile.editprofile状态处于活动状态时,有没有办法让这些状态保持活动状态？我正在追逐像state..editprofile这样的东西.
由于目前还没有理想的解决方案,我提出了一个相当优雅的解决方案.我的代码是通用的,易于理解和评论,因此它应该很容易适应任何项目.
样本国家
$stateProvider
// modal will open over this state from any substate
.state('foo',{
abstract: true,url: '/:fooProp',templateUrl: 'foo.html',controller: 'FooController'
})
.state('foo.main',{
url: '',templateUrl: 'foo-main.html',controller: 'FooMainController'
})
.state('foo.bar',{
url: '/bars/:barId',templateUrl: 'foo-bar.html',controller: 'FooBarController'
})
// append /modal route to each `foo` substate
.state('foo.main.modal',getModalState())
.state('foo.bar.modal',getModalState())
;
function getModalState() {
return {
url: '/modal',onEnter: [
'$modal','$state',function($modal,$state) {
$modal.open({
templateUrl: 'foo-modal.html',controller: 'FooModalController'
}).result.finally(function() {
// go to parent state - the current `foo` substate
$state.go('^');
});
}
]
}
}
调节器
$scope.goToModalState = function() {
// go to this state's `modal` state
$state.go($state.current.name+'.modal');
};
视图
<a ng-click="goToModalState()">Open Modal</a>
