No "Back" button on certain navigations

Little navigation quirk:

  1. I’ve a “Details” state
  2. I’ve created a button on Welcome page that navigates to this state
  3. When you click it, it navigates fine and introduces a “Back” button
  4. Click Tabs and then click “Details”
  5. The navigation to “Details” happens but no “Back” button is at top

Any ideas? Here is Codepen:

See the Pen Multi-Tabs And Side-Menu: Nightly by ScottN (@ScottN) on CodePen.

So this is because you are going from a tabbed view, to a non-tabbed view.

So because tabs can maintain multiple navigations stacks all at once, they tend not to play well with view that are not tabbed views.

So what you are seeing is a case where ui-router and our history manager can’t keep track all a multi-stack history view, and a linear history view.

I’m not a ionic pro, but I think this is intended behavior since the last beta:

In Beta 14, those links in the side-menu now trigger a change in the navigation stack.

Link: Navigating the Changes - Ionic Blog. I assume there is some workaround (like manually linking it), not sure if it makes a lot of sense though.

Edit: @mhartington posted in the same second as I did, he’s the pro ;).

1 Like

Is there any way to force the back button to show on certain navigations? If you checkout the Codepen again in full screen mode, and navigate to Details from the tabs and hit the browser back button, it definitely goes back to where you were at.

1 Like

You can create your own back button with window.history.back() action on it.

Hi @alfons12,

Thanks for your reply. How would I specify which states can have a back button on them or not since the ion-nav-back-button is defined in the navigation template? Is this some workaround or something you can point me to that will guide me in trying this out?

Use hide-back-button on ion-view: http://ionicframework.com/docs/api/directive/ionView/

So if the back button doesn’t exist at all (since it is the beginning of the navigation stack), you can insert a custom back button on the navbar for the tabbed view:

<ion-nav-bar class="bar-positive">
    <ion-nav-buttons side="left">
      <button ng-if="$root.showCustomBack" ng-click="$root.goBack()" class="button button-clear"><i class="icon ion-chevron-left"></i></button>
    </ion-nav-buttons>
</ion-nav-bar>

Then in your run function you can define the goBack function and when to show the custom back button:

.run(function($rootScope, $state) {
    $rootScope.goBack = function() {
        // function to go back
        window.history.back();
    }

    $rootScope.$on('$stateChangeSuccess', function () {
        if ($state.$current == 'app.tabs1.home1') {
           $rootScope.showCustomBack = true;
        }
    });
})

I modified your codepen to show this, it would need some tweaking, but maybe it will help: http://codepen.io/anon/pen/Ggmwqr

Thanks everyone, I was able to fix it by removing the main back button in my navigation and just implement a back button on each state that I wanted.

Here is the codepen, there is no animations on tabbed views, unfortunately: