角UI路由器嵌套意见 [英] Angular UI router nested views

问题描述

我有这样的结构：

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

我希望能够在主状态来定义模板，像下面而不是在孩子的状态来管理它。

I want to be able to define the templates in the main state like below instead of having to manage it in the child state.

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

我想名为侧边栏来不会是一个孩子的状态主和填充用户界面视图由主国家的反对意见，而不是通过一个孩子国家templateUrl场。我该怎么做？

I'd like the ui-view named sidebar to not be a child state of main and be populated by the main state's views object instead of by a child state's templateUrl field. How can I do that?

推荐答案

我们可以使用更多的意见里面的有一个状态，请参见：

We can use more views inside one state, see:

• 多个命名景观

• Multiple Named Views

该定义将只需要使用绝对命名：

The definition would just need to use the absolute naming:

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

作为这里详细解释：

As explained in a detail here:

• View名称 - 相对与绝对名称

• View Names - Relative vs. Absolute Names

在幕后，每一个观点被分配遵循的方案绝对名称 视图名@ Statename的 ，其中视图名是所使用的名称view指令和国家名称是国家的绝对名称，例如： contact.item。您也可以选择在绝对语法来写你的视图名称。

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.

所以，上面的代码段所示，如果的内容

So, as snippet above shows, if the content of the

 /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将包含占位符：

and the index.html will contain placeholder:

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

然后

• 主 - 将在父根（的index.html）搜索


• '边栏@ STATE1 在'状态1'将被评估为的viewName /目标（自身）

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

An example with similar idea and some layout.html behind...

这篇关于角UI路由器嵌套意见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！