Ionic back button does not display correctly when switching tabs

Question

I have a main tab that only shows a list of items. and the settings tab, which has a nested view for installing different configurations.

If I move in this particular order, the "Back" button does not display correctly, or if it is shown, the title will not remain on the left: 37px

This is how I create a navigation 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 to clear the history of this tab, so when I click on it, the main settings tab opens instead of the previously opened subview? Or, if it needs to be shown, it must correctly calculate the left side of the header.

Here is the codepen demo. Click on the tabs in that 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, I have discovered that there is a $scope.$watch that decides whether to show or hide a button. and it works later (after calculating and aligning the name). Therefore, when calculating leftWidth , the width of the button is not returned.

Answer 1

When tabs are used like this, each tab contains its own history. It actually shows the return button correctly, because the state of the main tab has changed to a subpage. Then the "Back" button will return you to the home page of this tab (the return button depends on each tab!). The first click / click on a tab does the job of switching tabs, the second click / click actually brings the user to the default page for that tab. Sometimes the mistake is that the width of the back button is still applied.

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

You can use $ionicNavBarDelegate.showBackButton(false); in the controller on the main page to disable the back button during this viewing. There is also a nav-clear directive that you can impose on the anchor tag to explicitly hide the back button in a bound form.

Controller example

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

Answer 2

If you are using Angular Routes only, use the following information

$ route.reload ()

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

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