State with multiple views with nested states


I’m trying to build an app based on a tab view; within the first two tabs I wanted to see two (separate) lists. Tapping on a item of the list would bring you to its detail, where a “back” button is bringing you back to the list.

I created a Plunkr just to get you the idea.

In the first, abstract state (tab1) I obviously need to target a specific, named view (the first tab content area), but I think that the child states, who should target the unnamed view within its parent state (tab1.html), can’t find it.

Any idea?
Thank you!


Staying true to the forum’s tradition, a few hours after posting my desperate question I found an answer by myself. This is the working Plunkr!

Key points

  • The parent state must be abstract
  • Views in the child states must be addressed absolutely (eg. viewName@parentStateName)
  • In the parent template you must use the ion-nav-view directive for the child views.

I’ve been inspired by this Fiddlr, but mine is focused on Ionic.

Hope this helps!