History In Nested Tab View with Side Menus From Templates


#1

I’m creating an app that combines tabs with nested view and side menus that change depending on which view is displayed.

The problem is that when I use templates for the side menus I do not have any history for the nested views and thus no back button display. If I change the ion-nav-view where the side menu is inserted to an ion-view, the back button works, but my side menu templates are not inserted.

I have put together a codepen that demonstrates this:Nested Tabbed with Side Menu Templates

If you change line 59 from

<ion-nav-view name="side-menu"></ion-nav-view>

To

<ion-view name="side-menu"></ion-view>

You can see the change in behavior. Is there a way to use templated side-menus and still have the history work for nested states?


#2

After poking around in $ionicHistory for each state change I’m beginning to see what is happening here. Each tab is getting it’s own history stack, which was well explained previously. When a root view in the tabs is instantiated, it gets a viewId. The side menu for that page is also instantiated and gets it’s own viewId and is placed on the top of the history stack. The url for the side view is the same as for the page. When activating $ionicHistory.goBack(), the currentView is set to the side menu viewId and the backView is the parent page. So goBack() is sending it back to itself. This must be an artifact of the additional ion-nav-view on the abstract tabs template.


#3

I’ve resolved this so that it works the way I want. The side menus load from templates that are associated with the state and the history of the nested views work correctly. I substituted ui-view in the abstract template that holds the tabs and side menu directives for the ion-nav-view at line 59. This has the effect of still providing a view for ui-router to insert the template, but it bypasses Ionic’s history mechanism. The above codepen has been changed to reflect this and demonstrates a tabbed interface with nested pages that have side views that are loaded from templates.