ui-router中的多个ui-view html文件

ui-router中的多个ui-view html文件

我不确定我是否100％理解您的目标，但是有更新的插件，显示了我们如何使用嵌套视图。

首先，有一个$ state定义来显示嵌套：

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

这是 索引 核心模板

layout.html

：

<div>  <section >    <div ui-view="top"></div>  </section>  <section >    <section >      <div ui-view="left"></div>    </section>    <section >      <div ui-view="main"></div>    </section>  </section></div>

以及它如何运作？

一，列表视图

我们可以看到

tpl.top.html

<div>  This is a tpl.top.html<br />  <a ui-sref="index">index</a>  <a ui-sref="index.list">index.list</a><br /></div>

确实有一些导航到 索引 或 列表视图 。列表视图将被注入到tpl.left.html中，如下所示：

<div>  This is a tpl.left.html  <h4>place for list</h4>  <div ui-view=""></div></div>

因为视图目标是未命名的

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

，所以我们可以这样定义$ state：

.state('index.list', {        url: '/list',        templateUrl: 'list.html',        controller: 'ListCtrl'})

我们可以看到，我们以未命名的索引（根）状态视图锚为目标。但对于细节，我们确实使用了不同的技术：

二。详细视图

这是tpl.main.html的内容：

<div>  This is a tpl.main.html  <h4>place for detail</h4>  <div ui-view="detail"></div></div>

在这种情况下，视图的锚点名为：ui-view =“ detail”，这就是为什么我们必须这样定义 详细 状态的原因：

.state('index.list.detail', {        url: '/:id',        views: {          'detail@index' : { templateUrl: 'detail.html', controller: 'DetailCtrl'          },        },})

我们可以看到，由于父视图不是我们状态的目标 （ 大父级 索引是目标）， 我们必须使用笨拙的命名：

'detail@index'

三，视图名称-相对名称与绝对名称

来自doc的小引用：

在幕后，每个视图都被分配一个遵循方案的绝对名称

viewname@statename

，其中viewname是view指令中使用的名称，状态名称是该状态的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

简介：
因此，本示例就是有关此示例的-几乎所有的基本功能

ui-router

。我们在这里展示了如何使用 嵌套 ， 视图命名
（绝对/相对），以及如何为一个状态使用 多个视图 （索引状态定义）。
请注意，这里的
所有 *** 作都
起作用（单击顶部的inex.html，然后尝试选择一些细节）