我在我的应用程序中使用了优秀的ui-router模块。作为其中的一部分，我使用命名视图来管理我在应用程序中的“动态子导航”。
考虑以下几点：
$urlRouterProvider.otherwise('/person/list');
$stateProvider
.state('person',{
url: '/person',abstract: true,})
.state('person.list',{
url: '/list',views: {
"main@": {
templateUrl: "person.list.html",controller: 'PersonListController'
}
}
})
.state('person.details',{
url: '/{id}',views: {
'main@': {
templateUrl: "person.details.html",controller: 'PersonController'
},'nav@': {
templateUrl: "person.nav.html",controller: 'PersonNavController'
}
}
});
当用户首次访问该应用程序时，会显示一个人员列表。当他们点击一个人时，他们将被带到详细信息页面。相当基本的东西这是标记如果它有帮助…
<div>
<aside ui-view="nav"></aside>
<div ui-view="main"></div>
</div>
但是，PersonNavController调用REST服务来获取一个人的列表，所以在查看一个人时，用户能够浏览兄弟元素。使用上述方法会导致模板和控制器重新渲染，从而在每次点击之后导致延迟，尽管内容从不改变。
有没有办法保持’nav @’视图加载，只刷新’主@’视图？
在这种情况下，我使用ui-router的方式是：将视图移动到最小公分母。
其他单词：如果ui-view =“nav”在所有细节之间共享，并且对于所有的细节都是相同的(因为它应该只加载一次) – 它应该是列表状态的一部分(细节的父代州)
父母国家的定义将如下调整：
.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路由器的力量。在每个国家的定义下，我们都可以瞄准目前的观点。现在，导航视图是列表状态定义的一部分 – 即在详细切换期间不会重新加载(也可以查看here以获得更多的解释)
我们只需要使用定义的命名约定，请参阅：
> View Names – Relative vs. Absolute Names
上述文件中几条引用的行：
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" : { }