Ionic history stack when using side menu and tabs

Question

I am having some troubles with ionic and its history stack when using side menus and tabs.

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

Steps to follow to get to the problem:

1. Open side menu
2. Navigate to "Master List"
3. Choose one of the items
4. You'll get redirected to the general-data-tab of the detail page

The problem is that there's no back-button displayed in navigation by ionic itself. I created an own back button that calls $ionicGoBack($event) to see whether ionic has the history stack or not. But when clicking this button you'll see that ionic does not navigate back to the master-list, instead you'll stay on the general-data-tab of the detail page.

Can anyone tell me what the problem is? I am aware of tabs having their own history stack, nevertheless the tab should know its ancestor, or am I wrong?

Many thanks in advance for your help!

Best regards

Answer 1

This is due to the fact that the menu-close directive resets the history stack (as explained here).

If you remove "menu-close" from your elements, then you keep the history, but loose some of the expected behaviour.

As a solution, you can develop your own directive (let's say "menu-close-keep-history") to replace the "menu-close" one.

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();
                }
            });
        }
    };
}]);

This should do the trick.

Answer 2

Well, instead of custom directive, one can use menu-toggle instead of menu-close When you use

menu-toggle

ionic keeps track of your navigation history

Answer 3

Each ion-tab has it's own history stack . When you hit an item in the list and go to general-data/:id, you're creating a new history stack--notice each tab has it's own ion-nav-view.

I've run into this before, and just used the tabs css style and attached an ng-click or ng-href to each tab and continue working off the current history stack, and maybe reuse your tab bar as a template or a directive.

Hope that helps!

Answer 4

Just a small hack that I discovered. If you don't want the tabs to have its own history stack. Just add a div above your ionic 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 could always override $ionicGoBack for all controllers then set a default view if the historystack has no backview.

E.g.

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

Answer 6

I did something like this trick:

HTML:

<ion-back-button (click)="onBack()"></ion-back-button>

TS:

onBack(){
  window.history.back();
}