这个问题基于"如何在更改状态时保持同级ui视图"(plunker)。
当我在主导航(mainNav)中更改状态时,我试图保持视图(内容)不变。
内容应仅由子导航设置,并在更改主导航时保留。
是否有可能在ui路由器中保留一个视图,即使状态为左?
angular.module('MyApp', [
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
url: '/',
views: {
'@': {
templateUrl: 'layout.html'
},
'mainNav@index': {
template: '<a ui-sref="Main3">Main3 - with sub</a><br />'
+ '<a ui-sref="Main4">Main4 - with sub</a>'
},
'subNav@index' : {
template: '<p>This is the sub navigation</p>'
},
'content@index': {
template: '<p>Content shared for MAINs</p>'
}
}
})
.state('Main3', {
parent: 'index',
url: '/Main3',
views: {
/*'mainNav': {
},*/
'subNav': {
template: '<a ui-sref="Main3.Sub1">Main3.Sub1</a><br />'
+ '<a ui-sref="Main3.Sub2">Main3.Sub2</a>'
}
}
})
.state('Main4', {
parent: 'index',
url: '/Main4',
views: {
'subNav': {
template: '<a ui-sref="Main4.Sub1">Main4.Sub1</a><br />'
+ '<a ui-sref="Main4.Sub2">Main4.Sub2</a>'
}
}
})
.state('Main3.Sub1', {
url: '/Sub1',
views: { 'content@index': { template: 'Content of Main3.Sub1' } }
})
.state('Main3.Sub2', {
url: '/Sub2',
views: { 'content@index': { template: 'Content of Main3.Sub2' } }
})
.state('Main4.Sub1', {
url: '/Sub1',
views: { 'content@index': { template: 'Content of Main4.Sub1' } }
})
.state('Main4.Sub2', {
url: '/Sub2',
views: { 'content@index': { template: 'Content of Main4.Sub2' } }
})
});
当我换到另一个状态时,我发现了Persist状态,但它并不能完全解决问题。状态是持久的,但在导航到不同的状态时,不考虑保持视图的一致性。
是的,它很容易,但它有其局限性:将所需的数据存储在父级的范围中。
$state.state('parent', {
controller:'ParentController'
});
$state.state('parent.child1', {
controller:'ChildController'
});
$state.state('parent.child2', {
controller:'ChildController2'
});
// in Parent controller
$scope.context = {};// it important to create a intermediary field that will store the data, otherwise you might have a problem with scopes inheritance
// in Child controller
$scope.context.toto = 'titi';
//在其他子控制器中$scope.context.toto='woof';
注意:如果使用controllerAs语法,我不知道这是否有效。
我个人将其用于带有下一页/上一页按钮的多页表单。
Walfrat的答案似乎是正确的。我只是想详细说明,也许能理解你在寻找什么。以下是我认为您的要求:
// app.js
...
$stateProvider
.state('nav', {
url: '/',
templateUrl: 'app/templates/nav.html',
controller: 'NavCtrl as nav',
abstract: true
})
.state('nav.subNav', {
url: 'subNav/',
templateUrl: 'app/templates/subNav.html',
controller: 'subNavCtrl as subNav',
abstract: true
})
.state('nav.subNav.index', {
url: 'index',
templateUrl: 'app/templates/index.html',
controller: 'IndexCtrl as index'
});
$urlRouterProvider.otherwise('/subNav/index');
...
在本例中,您可以通过在nav状态中包含abstract: true
来设置默认视图(注意:我从未尝试过三种状态,但它适用于两种状态)。这可能会给你带来你想要的效果。
至于将子导航作为视图,这应该是可能的,但我不确定是否建议使用这样的深度嵌套视图。这接近你想要的吗?