ionic Back button incorrectly shown while switching tabs

Question

I have a main tab, which just shows the list of items. and settings tab which has nested view for setting different configs.

If I navigate in this particular order, the back button is shown incorrectly, or if it is to be shown, the title doesn't get left: 37px

This is how I am creating the nav bar.

<ion-nav-bar class="bar-stable no-animation" align-title="left">
  <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>
</ion-nav-bar>

Is there a solution, either to clear the history of that tab, so while clicking back on it opens the main settings tab instead of the previously opened nested view? Or if it needs to be shown, it should properly calculate the left of title.

Here's a codepen demo. Click on tabs in this order.

1. On main page, click on Scientific Facts
2. After view changes, click on Contacts tab
3. Then click on Home tab again. It reproduces the behavior.

Update:

So far what I found is that there's a $scope.$watch which is deciding whether to show or hide back button. and this gets triggered late (after calculation and alignment of title). Hence the while calculating, leftWidth doesn't get back button's width.

Answer 1

When tabs are used like this, each tab contains its own history. It is actually showing the back button correctly, because the home tab state has changed to a subpage. The back button then is going to take you back to the home page of this tab (back button is specific to each tab!). The first click/tap on a tab button does the work of switching the tabs, a second click/tap will actually take the user to the default page for that tab. The bug is sometimes the back button width is still being applied.

I believe the Ionic team is working on some improvements and fixes for this as well.

You can use $ionicNavBarDelegate.showBackButton(false); in the controller for the main page to disable the back button during that view. There is also the nav-clear directive you can put onto an anchor tag to explicitly hide the back button in the linked view.

Controller Example

angular.module('App').controller('HomeCtrl', function ($scope, $ionicNavBarDelegate) {
  // Disable back button on this controller
  $ionicNavBarDelegate.showBackButton(false);
});