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" : { }
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)