ionic Back button incorrectly shown while switching tabs

5
votes

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>

enter image description here

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.

2
javascriptangularjscordova-3ionic-framework
I had this problem awhile back. I solved it by saving the "historyID" of the home tab and going directly to that. I don't think it's a great solution, so I'm curious what others come up with. In the mean time, you can see what I did here... codepen.io/MrOnosa/pen/ILCed - Onosa
Hmm.. that's pretty nice workaround. Let's see if anybody has any solution. I tried to debug in ionic.bundle.js. It seems like state of back button is changed after the tab is switched. Due to which if we go to a new tab from nested view, the title comes indented. This is also a related bug. - Salman

2 Answers

4
votes

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);
});
0
votes

If you are using only Angular Routes, Use follwoing

$route.reload()

You can also Use following if you are using UI-Router on Ionic

$state.go($state.current, {}, {reload: true});