Question

我在我的应用程序中使用了优秀的ui-router模块。作为其中的一部分，我使用命名视图来管理动态子导航＆＃39;我在应用程序中。

请考虑以下事项：

$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@'视图，只刷新'main@'视图？

Answer 1

我在这种情况下使用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状态定义的一部分 - 即在详细切换期间不会重新加载（另请查看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-Router

1 个答案: