当状态发生变化时,如何防止命名视图中的重载? AngularJS UI路由器

前端之家收集整理的这篇文章主要介绍了当状态发生变化时,如何防止命名视图中的重载? AngularJS UI路由器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在我的应用程序中使用了优秀的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" : { }
原文链接:https://www.f2er.com/angularjs/144820.html

猜你在找的Angularjs相关文章