更改状态时如何保持同级 ui-views? [英] How can I persist sibling ui-views when changing state?

问题描述

我的应用程序中有 2 个 ui-view 指令.一个包含子导航，另一个是实际的页面内容.我的子导航是一个树形结构，当您单击一个结束节点(或叶子)时，应该是内容视图唯一更新的时间.每当您单击子导航中的非叶子节点时，我希望内容视图在子导航视图更改时保持不变.

I have 2 ui-view directives in my application. One contains subnavigation and the other is the actual page content. My subnavigation is a tree structure, and when you click on an end node (or a leaf) should be the only time the content view gets updated. Whenever you click non-leaf nodes in the subnavigation, I would like the content view to stay the same while the subnavigation view changes.

发生的情况是，每当我切换到未定义其中一个视图的状态时，视图就会被清除.我希望它保持在我改变状态之前的状态.有人做到了吗?

What is happening is whenever I switch to a state that does not define one of the views, the view gets cleared out. I want it to stay how it was previous to me changing state. Has anyone accomplished this?

代码:

<!--NOTE THAT THESE ARE SIBLING ELEMENTS, NOT NESTED -->
<div id="subNav" ui-view="subNav"></div>
<div id="content" ui-view="content"></div>

这是我的路线设置.请注意，State1 应该只更新 subnav 视图，State2 应该只更新 content 视图.

Here is my route setup. Note that State1 only should update the subnav view and State2 should only update the content view.

$stateProvider
  .state('State1', {
    url: '/State1',
    views: {
      "subnav": { 
         templateUrl: "views/subnav.html",
         controller: "SubNavController"
      }
    }
  })
  .state('State2', {
    url: '/State2',
    views: {
      "content": { 
         template: "<p>State 2</p>"
      }
    }
  });

这是当前正在做的事情的 plnkr:http://plnkr.co/编辑/TF7x5spB8zFLQPzrgZc9?p=preview

Here is a plnkr of what is is currently doing: http://plnkr.co/edit/TF7x5spB8zFLQPzrgZc9?p=preview

推荐答案

我想说，这里的路真的很明确:

I would say, that the way to go here is really very clear:

我正在使用这种技术，在非常相似的场景中:左列是一个列表，右列(大区域) 是一个细节的地方.有一个例子

I am using this technique, in very similar scenario: left column is a list, right (large area) is a place for a detail. There is an example

状态定义为:

$stateProvider
    .state('index', {
        url: '/',
        views: {
          '@' : {
            templateUrl: 'layout.html',
            controller: 'IndexCtrl'
          },
          'top@index' : { templateUrl: 'tpl.top.html',},
          'left@index' : { templateUrl: 'tpl.left.html',},
          'main@index' : { templateUrl: 'tpl.main.html',},
        },
      })
    .state('index.list', {
        url: '/list',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
      })
    .state('index.list.detail', {
        url: '/:id',
        views: {
          'detail@index' : {
            templateUrl: 'detail.html',
            controller: 'DetailCtrl'
          },
        },
      })

所以在我们的例子中，它可能是这样的:

So in our case, it could be like this:

1. 父状态将具有两个状态(布局)的模板，并且还将注入导航栏
2. 孩子只会将视图注入主区域

父状态:

.state('State1', {
    url: '/State1',
    views: {
      "bodyArea" { template: "body.thml"},
      "subnav@State1": { 
         templateUrl: "views/subnav.html",
         controller: "SubNavController"
      }
    }
})

所以我们可以看到，两种状态的模板，布局都定义在 State1 上，作为放置在bodyArea"中的视图.

So what we can see, the template for both states, the layout is defined on the State1 as a view placed in "bodyArea".

另一个视图(原始)通过绝对名称subnav@State1"注入到该模板中.IE.为一个父状态定义了 2 个视图...

The other view (original) is injected into that template, via absolute name "subnav@State1". I.e. 2 views defined for one parent state...

子状态:

.state('State2', {
    parent: 'State1', // a child needs parent
    url: '/State2',
    views: {
      "content": { 
         template: "<p>State 2</p>"
      }
    }
})

在这里，我们只是说，State1 是 State2 的父级.这意味着，内容"目标/锚 (ui-view="content") 必须是 State1 中定义的视图的一部分.这里最好的地方是body.html"...

Here, we just say, that State1 is parent of State2. That means, that the "content" target/anchor (ui-view="content") must be part of the views defined in State1. The best place here would the "body.html"...

EXTEND:基于评论和 这个 plunker 有一些问题，我创建了它的 更新版本.Main1 的导航已损坏(以便能够进行比较)，但 Main2 和 Main3 正在工作.

EXTEND: based on comments and this plunker with some issues, I created its updated version. Navigation to Main1 is broken (to be able to compare), but Main2 and Main3 are working.

• Main2 正在工作，因为它的 def 与 index 状态
相似另一方面，
• Main3 是 index 状态的子节点

• Main2 is working because it has the similar def as index state
• Main3 is on the other hand child of the index state

从这段代码中可以清楚地看出绝对和相对命名:

The absolute and relative naming in action should be clear from this snippet:

索引:

$stateProvider
  .state('index', {
    url: '/',
    views: {
      '@': {
        templateUrl: 'layout.html'
      },
      'mainNav@index': {
        template: '<a ui-sref="Main1">Main1</a><br />'
                + '<a ui-sref="Main2">Main2</a><br />'
                + '<a ui-sref="Main3">Main3</a>'
      },
      'subNav@index' : {
        template: '<p>This is the sub navigation</p>'
      }, 
      'content@index': {
        template: '<p>This is the content</p>'
      }
    }
  })

有问题的 Main1

  .state('Main1', {
    url: '/Main1',
    views: {
      /*'mainNav': {

      },*/
      'subNav': {
        template: '<a ui-sref="Sub1">Sub1</a><a ui-sref="Sub2">Sub2</a>'
      },
      'content': {
        template: '<p>This is the content in Main1</p>'
      }
    }
  })

工作状态

  .state('Main2', {
    url: '/Main2',
    views: {
      '': {
        templateUrl: 'layout.html'
      },
      'mainNav@Main2': {
        template: '<a ui-sref="Main1">Main1</a><br />'
                + '<a ui-sref="Main2">Main2</a><br />'
                + '<a ui-sref="Main3">Main3</a>'
      },
      'subNav@Main2': {
        template: '<a ui-sref="Sub1">Sub for Main2</a>'
      },
      'content@Main2': {
        template: '<p>This is the content in Main2</p>'
      }
    }
  })
  .state('Main3', {
    parent: 'index',  // PARENT does the trick
    url: '/Main3',
    views: {
      'subNav': { // PARENT contains the anchor/target - relative name is enough
        template: '<a ui-sref="Sub1">Sub for Main3</a>'
      },
      'content': {
        template: '<p>This is the content in Main3</p>'
      }
    }
  })

这篇关于更改状态时如何保持同级 ui-views?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！