ui-router
在这种情况下,我使用的方式是: 将视图移动到最小公分母 。
换句话说:如果ui-view="nav"
所有细节都共享并且所有细节都相同 (因为它应该只被加载一次) -它应该是list
状态的一部分(状态的父对象detail
)
父状态的定义将如下调整:
.state('person.list', {
url: '/list',
views: {
"main@": {
templateUrl: "person.list.html",
controller: 'PersonListController'
}
// here we target the person.list.html
// and its ui-view="nav"
'nav@person.list': {
templateUrl: "person.nav.html",
controller: 'PersonNavController'
}
}
那么诀窍在哪里?在角的力量ui-router
。我们可以 在每个状态定义期间 将 当前 视图作为目标。现在,该nav
视图是list
状态定义的一部分-即,在细节切换期间不会重新加载该视图
我们只需要使用定义的命名约定,请参阅:
提到的文档中很少有引用的行:
views: {
////////////////////////////////////
// Relative Targeting //
// Targets parent state ui-view's //
////////////////////////////////////
// Relatively targets the 'detail' view in this state's parent state, 'contacts'.
// <div ui-view='detail'/> within contacts.html
"detail" : { },
// Relatively targets the unnamed view in this state's parent state, 'contacts'.
// <div ui-view/> within contacts.html
"" : { },
///////////////////////////////////////////////////////
// Absolute Targeting using '@' //
// Targets any view within this state or an ancestor //
///////////////////////////////////////////////////////
// Absolutely targets the 'info' view in this state, 'contacts.detail'.
// <div ui-view='info'/> within contacts.detail.html
"info@contacts.detail" : { }
// Absolutely targets the 'detail' view in the 'contacts' state.
// <div ui-view='detail'/> within contacts.html
"detail@contacts" : { }