javascript AngularJS UI 路由器：如何配置嵌套的命名视图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23590574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS UI router: How to configure nested named views?
提问by Radim K?hler
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, leftSidePaneModulemodule gets populated in to ui-view='leftSidePaneModule'placeholder. But the problem is, I have 2 more named views inside leftSidePaneModuletemplate. leftSidePaneModuletemplate looks like this:
因此，leftSidePaneModule模块被填充到ui-view='leftSidePaneModule'占位符中。但问题是，我在leftSidePaneModule模板中还有 2 个命名视图。leftSidePaneModule模板如下所示：
leftSidePaneModule.html
leftSidePaneModule.html
<div>
<div ui-view="leftWidgetOne"></div>
<div ui-view="leftWidgetTwo"></div>
</div>
How do i make modules leftWidgetOne& leftWidgetOnegets populated in to above placeholder?
如何使模块leftWidgetOne和leftWidgetOne在被填充到上述占位？
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
尝试：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!
谢谢！
回答by Radim K?hler
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, whereviewnameis the name used in theviewdirective and state nameis the state's absolute name, e.g.contact.item
...
(note: in our case it must be'profiles').
在幕后，每个视图都被分配了一个遵循方案的绝对名称
viewname@statename，其中viewname是view指令中使用的名称，状态名称是状态的绝对名称，例如contact.item
...
（注意：在我们的例子中它必须是'profiles'）。
The point is, that we can use the full (absolute)name of the view, being part of the currentstate definition:
关键是，我们可以使用 的完整（绝对）名称view，作为当前状态定义的一部分：
$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 plunkershowing the above code in action
还有plunker显示上面的代码在行动
