How to configure in ui-router a parent/children relationship where siblings coexist in parent page? I can't make child state multiple named views working.
This is my parent page:parent.html:
<div> I have two child pages:
child page1 detail: <ui-view /> and
child page2 detail:<ui-view />.
I need both pages
</div>
I don't know how to or if I should use multiple-named views since multiple named views seem parallel and separable rather than wrapped around by other text like in the code above.
My ui router config:
$stateProvider
.state('parent', {
url: '/parent',
templateUrl: 'parent.html'
})
.state('parent.children', {
url: '/children',
views: {
'child1': {
templateUrl: 'child1.html'
},
'child2': {
templateUrl: 'child2.html'
}
}
});
The unnamed ui-view only allows one child to be plugged in.
See code in Plunker
The <ui-view>
s in your example are incorrect. It's not a self-closing tag and when ui-view
is used as the element instead of an attribute directive you need a name
attribute to use named views. If you change your parent.html to the following it should work.
<div> I have two child pages:
child page1 detail: <ui-view name="child1"></ui-view> and
child page2 detail:<ui-view name="child2"></ui-view>.
I need both pages
</div>