如何才能改变状态时，我一直存在兄弟UI的看法？ [英] How can I persist sibling ui-views when changing state?

问题描述

我在我的应用程序2 用户界面视图指令。其中包含子导航，另一个是实际的页面内容。我的子导航是一个树状结构，当你点击一个终端节点（或叶）上应该是内容视图获取更新的唯一时间。每当你点击子导航的非叶节点，我想的内容视图保持不变，而子导航视图更改。

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.

正在发生的事情是，每当我切换到没有定义的视图之一的状态，认为被清除出去。我希望它留下来是怎么回事previous我改变状态。有没有人做到了这一点？

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?

code：

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

下面是我的路线设置。请注意，只有状态1应该更新 subnav 视图和状态2只更新内容视图。

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

状态DEF是：

$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"
      }
    }
})

那么，我们可以看到，这两个州的模板，在布局上定义的状态1 为放置在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 @状态1。即对于父母一方的状态定义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>"
      }
    }
})

在这里，我们只是说，这是状态1的状态2父。这意味着，内容的目标/锚的（用户界面视图=内容）的必须是在状态1中定义的视图的一部分。这里最好的地方会了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"...

扩展：根据意见和的一些问题这个plunker ，我创造了更新版本。导航，MAIN1破裂（以能够比较），但MAI​​N2和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 工作，因为它具有高清类似首页状态


• Main3 是在指数另一方面子状态

• 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有问题

the Main1 with issues

  .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的看法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！