I’m having some issues when using nested states with ionic.
First, to put in situation, the app is an ebook reader, and we have 3 screens:
- Covers: A list with all the books available.
- Reader: The book reader.
- “Reader menu”: Sort of a menu that contains 3 tabs: Table of Contents, Bookmarks and Personal notes.
Given this case, what I did is:
- Index.html: Include the ion-nav-bar (global for all app) and an ion-nav-view
- State “covers”: Just a simple ion-view URL: /covers
- State “book”: Abstract state that represents the detail of a book. It’s an ion-view with only an ion-nav-view to host its children states. URL: /book/:book_id
- State “book.reader”: State that includes the reader. URL: /reader (so, as it’s nested, it’s /book/:book_id/reader)
- State “book.menu”: Abstract state to hold the tabs. An ion-view with 3 ion-nav-views, one for each tab. URL: /menu
- States “book.menu.index” “book.menu.bookmarks” and “book.menu.notes”: One state for each tab.
Now, I think I really don’t understand the concept of nested states. When do I should use them? When I shouldn’t?
In this case (Plnkr) I run into two issues:
- The first issue is with the book abstract state. Its controller sets up the title of the navbar to the title of the book, once it’s been loaded. However, Ionic seems to put two nav-bars (one cached*, the other active), and calling $ionicNavBarDelegate sets the off-screen cached one (You can try it in the plunker… go to the book and you will see how the title gets changed but offscreen. If you go back and forward again, I don’t have this issue. And it doesn’t matter how much does it take to load the title, in the you can play with the $timeout)
- The second is with the tab view. If you go to the menu (In the reader, bottom left button), there seems to be a padding between the navbar and the tabs (+content). I found a workaround for this, by changing the CSS.
*Disabling ionic view cache still creates this double-nav-bar cached and active.
I’m just not really sure it’s a bug from ionic, because as I said, I think I still don’t understand the concept of nesting states.
Anyone can help me please?