Nested states with ion-nav-view


Hi there,

I’m currently trying to understand the stateful routing of ionic/angular-ui. I have a state nested under a different state but I can’t get it to be rendered, it’s always rendering the view of the parent state.

The following codepen showcases my problem:

The state ‘’ is set up under the URL ‘#/event/check-in/foo’ and is supposed to render the remplate ‘templates/foobar.html’. But when I click on the second item of the sidemenu (which leads to aforementioned URL) the template of the state ‘eventmenu.checkin’ is being rendered.

Who can tell me what I’m doing wrong here? What did I miss? :smile:

Thanks in advance!


Basically, you have defined:

-eventmenu (abstract)

  • eventmenu.home
  • eventmenu.checkin

now, eventmenu.checkin is not abstract, therefore, it can’t have children… So cannot be a child of eventmenu.checkin, since eventmenu.checkin is not abstract!

I would personally create eventmenu.checkin as abstract and create an eventmenu.checkin.home for the main view (which you now define as eventmenu.checkin) But I’m not to experienced with states myself, so there might be other ways…(I’m watching the topic to see if someone comes up with something I didn’t know :smiley: )