在改变状态时，我怎样才能坚持兄弟观点？

Question

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

当我切换到没有定义其中一个视图的状态时，正在发生的事情是视图被清除。我想让它保持我以前改变状态的方式。有没有人完成这个？

代码：

<!--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视图。

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

以下是目前正在做的事情：http://plnkr.co/edit/TF7x5spB8zFLQPzrgZc9?p=preview

Answer 1

我想说，去这里的方式非常清楚：

Multiple Named Views

Nested States & Nested Views

我正在使用这种技术，在非常类似的场景中：左列是列表，右侧（大区域）是一个细节的位置。有一个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'
          },
        },
      })

所以在我们的案例中，它可能是这样的：

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

父母州：

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

所以我们可以看到，两种状态的模板，布局都在State1上定义为放置在＆＃34; bodyArea＆＃34;中的视图。

通过绝对名称＆＃34; subnav @ State1＆＃34;将另一个视图（原始）注入到该模板中。即为一个父状态定义了2个视图...

儿童状态：

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

这里，我们只说，State1是State2的父级。这意味着，＆＃34;内容＆＃34; target / anchor （ui-view="content"）必须是State1中定义的视图的一部分。这里最好的地方是＆＃34; body.html＆＃34; ...

EXTEND：根据评论和this plunker处理一些问题，我创建了updated version。导航到Main1已断开（能够比较），但Main2和Main3正在工作。

• Main2 正在运行，因为它具有与index州相似的def
• Main3 另一方面是index州的孩子

此片段中的绝对和相对命名应该清晰明了：

索引：

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