Angular UI路由器嵌套视图

Question

我有这样的结构:

<div ui-view="main">
  <!-- content populated here by AngularJS ui-router -->
  <aside ui-view="sidebar">
    <!-- content populated here by AngularJS ui-router -->
  </aside>
</div>

我希望能够像下面那样在主状态中定义模板,而不必在子状态下管理它.

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    'sidebar': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

我希望命名的ui-view sidebar不是子状态,main并且由main状态的视图对象而不是子状态的templateUrl字段填充.我怎样才能做到这一点？

Answer 1

我们可以在一个州内使用更多视图,请参阅:

• 多个命名视图

定义只需要使用绝对命名:

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    // instead of
    // 'sidebar': {
    // we need
    'sidebar@state1': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

正如这里详细解释的那样:

• 查看名称 - 相对名称与绝对名称

在幕后,为每个视图分配一个遵循方案的绝对名称viewname@statename,其中viewname是视图指令中使用的名称,状态名称是状态的绝对名称,例如contact.item.您还可以选择以绝对语法编写视图名称.

所以,正如上面的代码片段所示,如果是内容的话

 /modules/blog/partials/index.html

将会:

<div>
  <!-- content populated here by AngularJS ui-router -->
  <aside ui-view="sidebar">
    <!-- content populated here by AngularJS ui-router -->
  </aside>
</div>

并且index.html将包含占位符:

<div ui-view="main" ></div>

那么

• 'main' - 将在父根(index.html)中搜索
• 'sidebar@state1' 将被评估为'state1'(本身)中的viewName/target

一个有类似想法和一些layout.html背后的例子 ......