Angular UI 路由器嵌套视图 [英] Angular UI router nested views

问题描述

我有这样的结构:

<!-- AngularJS ui-router 在此处填充的内容--><aside ui-view="sidebar"><!-- AngularJS ui-router 在此处填充的内容--></一边>

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

.state('state1', {网址:'/'，意见:{'主要的': {templateUrl: '/modules/blog/partials/index.html',控制器:'博客控制器'},'侧边栏':{templateUrl: '/modules/core/partials/sidebar.html'}}});

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

解决方案

我们可以在一个状态中使用更多视图，见:

• 多个命名视图

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

.state('state1', {网址:'/'，意见:{'主要的': {templateUrl: '/modules/blog/partials/index.html',控制器:'博客控制器'},//代替//'侧边栏':{//我们需要'侧边栏@state1':{templateUrl: '/modules/core/partials/sidebar.html'}}});

这里有详细解释:

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

<块引用>

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

所以，如上面的片段所示，如果

的内容

/modules/blog/partials/index.html

应该是:

<!-- AngularJS ui-router 在此处填充的内容--><aside ui-view="sidebar"><!-- AngularJS ui-router 在此处填充的内容--></一边>

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

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

然后是

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

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

I have a structure like this:

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

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 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.

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

 /modules/blog/partials/index.html

would be:

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

and the index.html will contain placeholder:

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

Then the

• 'main' - will be searched in parent root (index.html)
• 'sidebar@state1' will be evaluated as viewName/target in 'state1' (itself)

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

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