我如何prevent重装命名视图，状态变化时？ AngularJS UI的路由器 [英] How do I prevent reload on named view, when state changes? AngularJS UI-Router

问题描述

我使用的是优秀的 UI路由器模块中我的申请。作为其中的一部分，我用命名视图来管理动态子导航'我在应用程序。

I'm using the excellent ui-router module in my application. As part of this, I'm using named views to manage the 'dynamic sub-navigation' I have in the app.

考虑以下几点：

$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'
            }
        }
    });

当用户第一次访问应用程序，它们与人名单psented $ P $。当他们点击一个人，他们被带到详细信息页面。 pretty基本的东西。这里的标记，如果有帮助...

When users first visit the app, they are presented with a list of people. When they click on a person, they are taken to the details page. Pretty basic stuff. Here's the markup if it helps...

<div>
    <aside ui-view="nav"></aside>
    <div ui-view="main"></div>
</div>

但是， PersonNavController 调用REST服务获取的人的名单，所以看一个人的时候，用户能够浏览同级元素。使用上面的方法使模板和控制器重新渲染，从而导致每次点击后的延迟，尽管内容从未改变。

However, the PersonNavController calls a REST service to get a list of people, so when viewing a person, the user is able to navigate sibling elements. Using the method above causes the template and controller to re-render, thus causing a delay after every click, despite the content never changing.

有什么办法让'导航@'视图加载，只刷新'主@'看法？

Is there a way to keep the 'nav@' view loaded, and only refresh the 'main@' view?

推荐答案

我使用 UI路由器在这种情况下的方式是：移动看法最小公分母的。

The way I am using ui-router in this scenarios is: move the views to the least common denominator.

也就是说：如果是用户界面视图=导航的所有细节中共享，是所有的的相同（因为它应该只能一次加载）的 - 它应该是列表的一部分状态的的细节（父状态）的

Other words: In case that ui-view="nav" is shared among all the details and is the same for all of them (because it should be loaded only once) - it should be part of the list state (parent of the detail state)

父状态确定指标将有所调整如下：

the parent state defintion would be adjusted like this:

.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"
        '[e-mail]': {
            templateUrl: "person.nav.html",
            controller: 'PersonNavController'
        }
    }

那么，是的伎俩？在角 UI路由器的力量。我们可以，的每个国家确定指标的过程中，瞄准的电流的视图。现在，导航视图是列表状态定义的一部分 - 即它不会细节切换时重新加载（这里也检查更多解释）

So where is the trick? In the power of the angular ui-router. We can, during each state defintion, target the current view. Now, the nav view is part of the list state definition - i.e. it will not be reloaded during the detail switching (also check here for more explanation)

我们只需要使用所定义的命名约定，请参见：

We just have to use the defined naming conventions, see:

• View名称 - 相对与绝对名称

• 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
    "[e-mail]" : { }

    // Absolutely targets the 'detail' view in the 'contacts' state.
    // <div ui-view='detail'/> within contacts.html
    "detail@contacts" : { }

这篇关于我如何prevent重装命名视图，状态变化时？ AngularJS UI的路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！