ionic-display three views with sperate navigation's in the same page

Question

I'm working on a tricky project where in the user interacts with 3 screens.

These three screens are in a single page(three ion-nav-views in the same page) and these screens are three separate things and should have independent navgation's to work as there applications within that page.

This is desktop views and in mobile, only one ion-nav-view should be displayed and rest two should be minimised and user should be able to switch between these navs using tabs at bottom(currently using jquery to minimise the div surrounding the navs). And most importantly, in mobile back button should be handled separately for each nav-view.

Currently, I'm facing problem in achieving separate navigation's in each nav-view, since the state which loads these three nav-views loads three starting pages inside each nav-view and when i navigate to different views inside each nav-view and when I come back to the home state using nav bars back button in any one nav-view, then all the three nav-views gets refreshed all ttogethe since the home state loads the three nav-views to their initial starting page). And I don't have a clue how to handle the devices physical back button for each nav-view separately.

This is my first project, so please guide me.

Thanks in advance.

Answer 1

You can have all the contents of three screens in single html page and use tabs for navigation purpose.

For hiding the other tabs you can use ng-show directive.