Ion history stack when using sidebar and tabs

Question

I am having problems with the ionic and its historical stack when using side menus and tabs.

I created a plunker example here: http://embed.plnkr.co/XK6seY9mDypTW6GcsCpj/preview

Steps to follow this issue:

• Open side menu
• Go to the "Master List"
• Choose one of the items
• You are redirected to the general data tab on the details page.

The problem is that the back button is not displayed in the navigation bar. I created my own feedback button that calls $ ionicGoBack ($ event) to find out if the ion stack has stories or not. But when you click this button, you will see that the ionic element does not return to the main list, instead you will remain on the general data tab on the detailed page.

Can someone tell me what the problem is? I know that tabs have their own history stack, however, should the tab know its ancestor, or am I mistaken?

Many thanks for your help!

Best wishes

Answer 1

This is because the menu-close directive drops the history stack (as described here ).

If you remove the "close menu" from your items, you save the history, but lose some of the expected actions.

As a solution, you can develop your own directive (for example, "menu-close-keep-history") to replace "menu-close".

myModule.directive('menuCloseKeepHistory', ['$ionicHistory', function($ionicHistory) { return { restrict: 'AC', link: function($scope, $element) { $element.bind('click', function() { var sideMenuCtrl = $element.inheritedData('$ionSideMenusController'); if (sideMenuCtrl) { $ionicHistory.nextViewOptions({ historyRoot: false, disableAnimate: true, expire: 300 }); sideMenuCtrl.close(); } }); } }; }]); 

That should do the trick.

Answer 2

Well, instead of the user directive, you can use menu-toggle instead of menu-close when you use

switch menu

ion tracks navigation history

Answer 3

Each ion tab has its own history stack . When you click on an item in the list and go to the general data: /: id, you create a new history stack - note that each tab has its own ion-navigation view.

I came across this before and just used the css tabs style and attached ng-click or ng-href to each tab and continued working with the current history stack and maybe reused your tab bar as a template or directive.

Hope this helps!

Answer 4

Just a little hack that I discovered. If you do not want the tabs to have their own history stack. Just add a div above your ion tabs.

EG:

 <div ng-show="vm.loading"> <div style="width: 50px; margin: 0 auto;"> <ion-spinner></ion-spinner> </div> </div> <ion-tabs data-ng-controller="something as vm" ng-hide="vm.loading"> 

Answer 5

You can always override $ ionicGoBack for all controllers, and then set the default view if historyystack does not have a reverse lookup.

eg.

 $rootScope.$ionicGoBack = function() { if( $ionicHistory.backView() == null || !angular.isDefined($ionicHistory.backView()) ){ $state.go("app.default", {}); }else{ $ionicHistory.goBack(); } };