javascript - Angular UI 路由器嵌套 View

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

我希望名为 sidebar 的 ui-view 不是 main 的子状态，而是由 main 状态的 View 填充对象而不是子状态的 templateUrl 字段。我该怎么做？

Answer 1

我们可以在一个状态下使用更多 View ，参见:

• Multiple Named Views

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

.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'
    }
  }
});

如这里的详细解释:

• View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

因此，如上面的代码片段所示，如果

的内容

 /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

example有类似的想法和一些 layout.html 背后......