问题描述
我有如下配置:
....state('个人资料', {摘要:真实, url : '/profiles', 解决: {...},意见:{主模块:{模板网址:'/partials/home.html',控制器:'HomeCtrl'}, leftSidePaneModule: {templateUrl : '/partials/leftSidePane.html',控制器:'LeftSidePaneCtrl'}}})...
主玉文件
....col-xs-4.col-md-4.chat_block(ui-view='leftSidePaneModule', autoscroll="false")...
因此,leftSidePaneModule
模块被填充到 ui-view='leftSidePaneModule'
占位符中.但问题是,我在 leftSidePaneModule
模板中还有 2 个命名视图.leftSidePaneModule
模板看起来像这样:
leftSidePaneModule.html
<div ui-view="leftWidgetOne"></div><div ui-view="leftWidgetTwo"></div>
我如何制作模块 leftWidgetOne
&leftWidgetOne
被填充到上面的占位符?
我试过了,
....state('个人资料', {摘要:真实, url : '/profiles', 解决: {...},意见:{主模块:{模板网址:'/partials/home.html',控制器:'HomeCtrl'}, leftSidePaneModule: {templateUrl : '/partials/leftSidePane.html',控制器:'LeftSidePaneCtrl'}, 'leftWidgetOne@leftSidePaneModule' : {...}, 'leftWidgetTwo@leftSidePaneModule' : {...}}})...
尝试:2
....state('个人资料', {摘要:真实, url : '/profiles', 解决: {...},意见:{主模块:{模板网址:'/partials/home.html',控制器:'HomeCtrl'}, leftSidePaneModule: {templateUrl : '/partials/leftSidePane.html',控制器:'LeftSidePaneCtrl',意见:{'leftWidgetOne':{...}, 'leftWidgetTwo' : {...}}}}})...
两者都不起作用.
你是怎么做到的?
谢谢!
解决方案可以在这里找到:视图名称 - 相对名称与绝对名称.引用:
在幕后,每个视图都被分配了一个绝对名称,该名称遵循 viewname@statename
方案,其中 viewname
是 view 指令和 state name 是 state 的绝对名称,例如
contact.item
...
(注意:在我们的例子中,它必须是 'profiles'
).
关键是,我们可以使用 view
的完整 (绝对) 名称,作为 当前 状态定义的一部分:
$stateProvider.state('个人资料', {网址:'/个人资料',意见:{主模块:{模板:''+'<h1>主</h1>'+' <div ui-view="leftSidePaneModule"></div>'+'</div>',},//这里我们确实将上面刚刚添加的视图定位为mainModule"//作为 <div ui-view="leftSidePaneModule">'leftSidePaneModule@profiles':{模板:''+' <div ui-view="leftWidgetOne"></div>'+' <div ui-view="leftWidgetTwo"></div>'+'</div>',},//这里我们确实以子视图为目标//但仍然是上面定义的状态配置文件"的一部分//查看定义 'leftSidePaneModule@profiles''leftWidgetOne@profiles':{模板:'<h2>One</2>',},'leftWidgetTwo@profiles':{模板:'<h2>二</2>',},}});还有 plunker 显示了上面的代码运行
I have a configuration like below:
...
.state('profiles', {
abstract: true
, url : '/profiles'
, resolve: {...}
, views: {
mainModule: {
templateUrl : '/partials/home.html'
, controller : 'HomeCtrl'
}
, leftSidePaneModule: {
templateUrl : '/partials/leftSidePane.html'
, controller : 'LeftSidePaneCtrl'
}
}
})
...
Main Jade File
...
.col-xs-4.col-md-4.chat_block(ui-view='leftSidePaneModule', autoscroll="false")
...
So, leftSidePaneModule
module gets populated in to ui-view='leftSidePaneModule'
placeholder. But the problem is, I have 2 more named views inside leftSidePaneModule
template. leftSidePaneModule
template looks like this:
leftSidePaneModule.html
<div>
<div ui-view="leftWidgetOne"></div>
<div ui-view="leftWidgetTwo"></div>
</div>
How do i make modules leftWidgetOne
& leftWidgetOne
gets populated in to above placeholder?
I tried,
...
.state('profiles', {
abstract: true
, url : '/profiles'
, resolve: {...}
, views: {
mainModule: {
templateUrl : '/partials/home.html'
, controller : 'HomeCtrl'
}
, leftSidePaneModule: {
templateUrl : '/partials/leftSidePane.html'
, controller : 'LeftSidePaneCtrl'
}
, 'leftWidgetOne@leftSidePaneModule' : {...}
, 'leftWidgetTwo@leftSidePaneModule' : {...}
}
})
...
Attempt: 2
...
.state('profiles', {
abstract: true
, url : '/profiles'
, resolve: {...}
, views: {
mainModule: {
templateUrl : '/partials/home.html'
, controller : 'HomeCtrl'
}
, leftSidePaneModule: {
templateUrl : '/partials/leftSidePane.html'
, controller : 'LeftSidePaneCtrl'
, views: {
'leftWidgetOne' : {...}
, 'leftWidgetTwo' : {...}
}
}
}
})
...
Both are not working.
How do you do it?
Thanks!
解决方案 The solution could be found here: View Names - Relative vs. Absolute Names. A cite:
The point is, that we can use the full (absolute) name of the view
, being part of the current state definition:
$stateProvider
.state('profiles', {
url: '/profiles',
views: {
mainModule: {
template: '<div>' +
' <h1>Main</h1>' +
' <div ui-view="leftSidePaneModule"></div>' +
'</div>',
},
// here we do target the view just added above, as a 'mainModule'
// as <div ui-view="leftSidePaneModule">
'leftSidePaneModule@profiles': {
template: '<div>' +
' <div ui-view="leftWidgetOne"></div>' +
' <div ui-view="leftWidgetTwo"></div>' +
'</div>',
},
// and here we do target the sub view
// but still part of the state 'profiles' defined in the above
// view defintion 'leftSidePaneModule@profiles'
'leftWidgetOne@profiles': {
template: '<h2>One</2>',
},
'leftWidgetTwo@profiles': {
template: '<h2>Two</2>',
},
}
});
There is also plunker showing the above code in action
这篇关于AngularJS UI 路由器:如何配置嵌套的命名视图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
09-21 14:02