您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

状态更改时,如何防止在命名视图上重新加载?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" : { }
其他 2022/1/1 18:13:45 有799人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶