Developing support for multiple ion-nav-view per state

Hi everyone,

this is not the first post I make about working out with tablets but I feel that this is really a missing feature. The side-menu is really not enough for us at the moment, we do need split views. I am working at Moodle and we are porting our current app to Ionic. Big move. We have a pretty complex navigation structure and need to make the app look a bit different on tablet. Obviously we do not want to maintain two separate code base for both tablets and phones.

What we did so far was to create two ui-view (not ion-nav-views), and hide one of them on tablet. Then, the we use state views and dynamic ui-sref to open the links from the left view in the right view. This feels like a hack that is going to haunt us in the future if we do not solve it better, here are a few problems:

  • We need 3 states
  • Split, which displays 2 ui-views on tablet, only 1 on phone
  • Right-content, which updates the content of the right view on tablet
  • New state for phone when coming from the first of the above
  • There are no animations when updating Right-content
  • The Right-content does not support a back button
  • When transitioning to another completely different state and coming back, the Right-content is lost as not cached

To solve this the Ionic way I was considering using 2 ion-nav-views at the same time, each of those would retain their history which is pretty nice. Though, without core hacks I could not get 2 navigation bars displayed at once. Once hacked, I find myself with pretty random animations when transiting back between views, what I found out was that going back to the main state which contains both ion-nav-view caused both of those to be updated. That leads to all sort of animation troubles which I am not too sure out to fix.

As we have now have some committment to Ionic, we would be able to dedicate some time to help fix that issue and share it (we are an Open Source project as well after all). But before diving more into this, we would appreciate some initial guidance.

The big question is mainly: Is that even possible in Ionic without having to refactor everything? And if yes, where should we start tackling that first?

Big thanks to everyone, Ionic is awesome and deserves its popularity.

I am hoping that we can find a solution to this problem.

Cheers,
Fred

PS: This is how our prototype looks so far: http://fmcorz.github.io/moodle-mobile-ionic-prototype/www/ (no credentials required)

2 Likes

Anyone with some ideas?

Hi,
we (the Moodle HQ mobile team) finally implemented an elegant solution using directives.

You can see the tracker issue with all the information here:
https://tracker.moodle.org/browse/MOBILE-876

and the relevant commits here:


and

You can test how it works in a real device using the Moodle Mobile official app for Android and iOs:

(Type student in the URL field and you will be automatically logged to a testing site that is reset every hour), then go to a course participants or content page you will see how it looks in mobile and tablet

Regards, Juan