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

Radim Köhler..

11

我不确定我是否100%理解你的目标,但有更新的plunker,显示我们如何使用嵌套视图.

首先,有一个$ 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:

它是如何工作的？

I.列表视图

我们可以看到的内容 tpl.top.html

This is a tpl.top.html

index

index.list

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

This is a tpl.left.html

place for list

因为视图目标是未命名的

.state('index.list', {

url: '/list',

templateUrl: 'list.html',

controller: 'ListCtrl'

})

我们可以看到,我们的目标是索引(根)状态视图锚,它是未命名的.但是对于细节,我们使用不同的技术:

II.详细视图

这是tpl.main.html的内容:

This is a tpl.main.html

place for detail

在这种情况下,视图的锚点名为:ui-view ="detail",这就是为什么我们必须像这样定义详细状态:

.state('index.list.detail', {

url: '/:id',

views: {

'detail@index' : {

templateUrl: 'detail.html',

controller: 'DetailCtrl'

},

},

})

我们可以看到,因为父视图不是我们状态的目标(祖父索引是目标),我们必须使用aboslute命名:'detail@index'

来自doc的小小的引用:

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

总结:

所以,这个例子是关于它的 - 几乎所有的基本特征ui-router.我们在这里展示了如何使用嵌套,查看命名(绝对/相对)以及如何将多个视图用于一个状态(索引状态定义)

请注意这里的 所有操作(单击顶部的inex.html,然后尝试选择一些细节)