My left side menu needs to persists across all states, but each state can optionally have a right side menu with whatever content that state chooses. For now, I've implemented this by making the content of the left side menu a directive of it's own that each state has to include. It's not very DRY and the left side menu is reloaded across states. It works, but it's not ideal.
The following approach is intuitive, but doesn't work because the right side-menu is nested in the ion-nav-view instead of being a direct child of ion-side-menus.
ion-side-menus
ion-side-menu-content
ion-nav-view // states want to include their own right side menu
ion-side-menu(side="left")
main-nav
// some-state.jade
some-directive
ion-side-menu(side="right") // side menu is broken because it's nested
If the right side menu is a direct child of ion-nav-view, is there a way for a state to decide what content is in it?
ion-side-menus
ion-side-menu-content
ion-nav-view
ion-side-menu(side="right")
// side menu content here according to current state...
ion-side-menu(side="left")
main-nav
Perhaps, I'm not fully understanding the crux of the question - and if so, I will delete this answer. But, as it seems to me, the approach that you find intuitive is actually counter-intuitive.
The intuitive approach in my mind (which coincides with how ui.router uses named views) is to define the structure of the app first, then define the views that each state would populate.
I am not familiar with ionic, so here's a conceptual example without it:
<div>
<div class="menu">
<div class="left">
left menu: same content for entire app
</div>
<div class="right">
right menu
<div ui-view="rightside">
</div>
</div>
<!-- main content -->
<div class="content" ui-view>
</div>
</div>
Then, each state can populate the "rightside"
view:
.state("stateA", {
views: {
"": {
template: "content of stateA"
},
"rightside": {
template: "menu of stateA"
}
}
})
.state("stateB", {
abstract: true,
template: "<div ui-view></div>"
})
.state("stateB.B1", {
views: {
"": {
template: "content of stateB.B1"
},
"rightside@": {
template: "menu of stateB.B1"
}
}
})
Both stateA
and stateB.B1
would populate the "rightside"
view when they load.