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
, whereviewname
is the name used in theview
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