大佬教程收集整理的这篇文章主要介绍了当状态发生变化时,如何防止命名视图中的重载? AngularJS UI路由器,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
考虑以下几点:
$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-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" : { }
以上是大佬教程为你收集整理的当状态发生变化时,如何防止命名视图中的重载? AngularJS UI路由器全部内容,希望文章能够帮你解决当状态发生变化时,如何防止命名视图中的重载? AngularJS UI路由器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。