AngularJS UI 路由器:如何配置嵌套命名视图?嵌套、视图、路由器、AngularJS
我有如下配置:
....state('个人资料', {摘要:真实, 网址: '/个人资料'， 解决: {...}, 意见: {主模块:{模板网址:'/partials/home.html'，控制器:'HomeCtrl'}, leftSidePaneModule: {模板网址:'/partials/leftSidePane.html'，控制器:'LeftSidePaneCtrl'}}})...Jade 主文件
....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></div>我如何制作模块 leftWidgetOne &leftWidgetOne 被填充到上面的占位符中?
我试过了，
....state('个人资料', {摘要:真实, 网址: '/个人资料'， 解决: {...}, 意见: {主模块:{模板网址:'/partials/home.html'，控制器:'HomeCtrl'}, leftSidePaneModule: {模板网址:'/partials/leftSidePane.html'，控制器:'LeftSidePaneCtrl'}, 'leftWidgetOne@leftSidePaneModule' : {...}, 'leftWidgetTwo@leftSidePaneModule' : {...}}})...尝试:2
....state('个人资料', {摘要:真实, 网址: '/个人资料'， 解决: {...}, 意见: {主模块:{模板网址:'/partials/home.html'，控制器:'HomeCtrl'}, leftSidePaneModule: {模板网址:'/partials/leftSidePane.html'，控制器:'LeftSidePaneCtrl', 意见: {'leftWidgetOne':{...}, 'leftWidgetTwo' : {...}}}}})...两者都不工作.
你是怎么做到的?
谢谢！
解决方案可以在这里找到解决方案:视图名称 - 相对名称与绝对名称.引用:
在幕后，每个视图都被分配了一个遵循 viewname@statename 方案的绝对名称，其中 viewname 是 view 指令和 state name 是状态的绝对名称，例如contact.item...(注意:在我们的例子中，它必须是 'profiles').
关键是，我们可以使用 view 的完整 (absolute) 名称，作为 current 状态定义的一部分:
$stateProvider.state('个人资料', {url: '/个人资料',意见:{主模块:{模板:'<div>'+'<h1>主要</h1>'+' <div ui-view="leftSidePaneModule"></div>'+'</div>',},//这里我们将刚才添加的视图作为mainModule"//as <div ui-view="leftSidePaneModule">'leftSidePaneModule@profiles': {模板:'<div>'+' <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:
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
...
(note: in our case it must be 'profiles').
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
