状态更改时,如何防止在命名视图上重新加载?AngularJS UI路由器

状态更改时,如何防止在命名视图上重新加载?AngularJS UI路由器,第1张

状态更改时,如何防止在命名视图上重新加载?AngularJS UI路由器

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" : { }


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5476590.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-12
下一篇 2022-12-12

发表评论

登录后才能评论

评论列表(0条)

保存