Back button not showing when coming from nested pages (tabs)

ionic-v1
1

I have a page (app.other), which can be accessed from other views.
When I go from app.home to app.other, the back arrow is correctly shown (all good).

But the back arrow is not shown when I go from another view with tabs, for example: app.tabs.tab1
What’s surprising is that the hardware back button works fine (it goes back to app.tabs.tab1), and I see the $ionicHistory views are also correct:

I don’t have any custom implementations, I am using the default code:

<ion-side-menu-content> <ion-nav-bar class="bar-dark"> <ion-nav-back-button> </ion-nav-back-button> ..

Any idea why the back arrow is not showing up correctly when coming from tabs (nested views)?

1 Like
2

Do you happen to have additional buttons in the tabs views? I had this problem before where the back button was being overridden by declaring additional buttons in the nav bar, even if they are being declared to a different position.

3

I do have another button for the menu toggle (and another for the help, if available) but not on the tab views, directly in the menu.html (so applying to all views).

Exact code:

		<ion-nav-back-button>
		</ion-nav-back-button>

		<ion-nav-buttons side="left">
			<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
			</button>
		</ion-nav-buttons>
		<ion-nav-buttons side="right">
			<button class="button-clear pull-right" ng-hide="!showAdvisor||!advisor.length" ng-click="showAdvisorHelp()"><i
				class="icon ion-ios7-help"></i> Help
			</button>
		</ion-nav-buttons>
	</ion-nav-bar>

I haven’t tried removing them (I need them anyway…), but when I navigate to the view app.other from another top-level view (like app.home), I do see the back button, the toggle button and the help one.
Only when I navigate to that view from a tab (like app.tabs.tab1), I don’t see it…
But the hardware back button correctly goes back (and $ionicHistory looks correct).

4

Hi @gnomeontherun. I have the same problem as @ThomasDalla and I also have another button in the nav-bar.

How can I check if my back button is overriden by additional button, and how can I solve?

Many thanks!!

My index.html:

  <ion-nav-bar class="bar-royal bar" align-title="center">
    <ion-nav-title>
      <img src="img/logo-navigation.png" style="height:44px;">
    </ion-nav-title>
    <ion-nav-back-button class="button-clear">
    </ion-nav-back-button>
  </ion-nav-bar>

My tab (this is at 2nd level navigation) … not showing back button when come from another tab)

<ion-view>
  <ion-nav-buttons side="right">
    <span class="button icon-right ion-ios7-search button-clear" ng-click="buscar()"></span>
  </ion-nav-buttons>
5

Hi, after rereading this closed issue I think this is not a problem but the expected behaviour. The back button is displayed if the the user goes from Tab A->Parent view to Tab A->Child view (same tab). If the user goes from Tab A to Tab B->Child view, the back button must not display.

The reported problem in that issue (the user goes from Tab A to Tab B->Child view and can’t navigate up to Tab B->Parent view) is working fine at least in the latest version.

6

Just upgraded to 1.0.0-rc.0, but it didn’t solve the problem.

Single View A -> Single View B#01 (that’s a view with parameter) : OK (back button shown)
Tab View T, Any Tab -> Single View B#01 : KO (back button hidden)

7

Hi,

Solution 1
I’m using this workaround for the moment to force the display of the back button.

$ionicNavBarDelegate._instances.forEach(function (instance) {
    var tamere = instance.update;
    instance.update = function (viewData) {
        viewData.enableBack = true;
        tamere(viewData);
        instance.update = tamere;
    }
}

Hope this might help.

PS : Salut Thomas ! Alors on fait de l’ionic ? n7 represent man !

Solution 2
After a while I found a better solution (still using the same viewData object)

Add this to your controller:

$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
    viewData.enableBack = true;
});

Cheers

19 Likes
8

Hi jdupouy,

I tried your solution number 2 its working perfectly Thanksss. But how can I have slide animation into this?

1 Like
9

@dhananjay_patil
hi, do you have any idea about the animation now?

10

You will often run into ‘< Back’ button problems if you use ‘href’.

The Ionic framework uses the angular-ui-router module for handling routes and defining states (including nested states and nested views). So you need to use ‘ui-sref’ or ‘$state.go()’.

E.g.:

<a ui-sref="app.editor({postId: item.post.id})">Go!</a>

Or:

$state.go('app.editor', {postId: item.post.id});

Take a look at this Plunker which addresses the issues with Ionic’s side-menu starter template:

11

Amazing! the Solution 2 works nicely. I just spent 2 days trying to figure out the animation part do you have any Ideas how can I make the animations work altogether with this?

Thanks

12

Guys I had the same problem and spent several hours. But the solution is very simple! I found it by invastigating "robinyo"s’ link for the starter template.

Just use this in your menu.html for defining your side menu:

<ion-side-menus enable-menu-with-back-views="false">

See: ion-side-menus - Directive in module ionic - Ionic Framework
From the docs:

Determines whether the side menu is enabled when the
back button is showing. When set to false, any menuToggle will be hidden,
and the user cannot swipe to open the menu. When going back to the root page of the side menu (the
page without a back button visible), then any menuToggle buttons will show again, and menus will be
enabled again.

For defining your menu left button (in menu.html) use the menu-toggle attribute:

<ion-nav-buttons side="left">
                <button class="button button-icon icon ion-navicon" menu-toggle="primary"></button>
</ion-nav-buttons>

Now the back button hides when the menu icon should be displayed!

Hope this helps some guys!

Edit: Just to be sure here is my menu.html. It’s important to define the back button here:

<ion-side-menus enable-menu-with-back-views="false">
    <!-- Center content of App -->
    <ion-side-menu-content>
        <ion-nav-bar class="bar-positive">
            <ion-nav-back-button>
            </ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button class="button button-icon icon ion-navicon" menu-toggle="primary"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent" class="no-animation"></ion-nav-view>
    </ion-side-menu-content>
</ion-side-menus>

Edit 2:
Another important thing is that I had to use:

ui-sref="app.tab2"

For my ion-items!
With my own click-event and the $state.go advice it always created the wrong back functionality (only the first tab view had the left button, the other main menues had only a back button!)

Edit 3:
The $state.go statement is working if you use right before:

this.$ionicHistory.nextViewOptions({
                disableBack: true
});
13

Both solution 1 and solution 2 brings up the back button. However, when I use it with “menu-close” being set in the side menu, the back button is not functional.

This seems to be the case, because menu-close clears the history.

Any help making the back button work when navigating from a side menu with menu-close being set?

14

thank you for your help. it really worked for my app.

15

navigation from nested view to root view i am getting back button instead of menu button.

i have 4 screens when i click button in first screen it navigates to second screen.when click back button in secondscreen it goes to first and also showing menu button.

but when i click back button in 3 or 4th screens it show back button instead of menu button.

please do suggest me

16

Hey guys why don’t you use “ion-pane”, Please try this:

<ion-view>
  <ion-pane>
    <ion-tabs class="tabs-top">
      <ion-tab title="Home">
        <!--Tab content goes here-->
      </ion-tab>
      <ion-tab title="About">
       <!--Tab content goes here-->
      </ion-tab>
    </ion-tabs>
  </ion-pane>
</ion-view>
17

<ion-pane>works perfectly for me. Thanks.

18

I’ve been using the solution 2 happily until 1.3.0 was released. Switching from 1.2.4 to 1.3.0 broken this functionality so I had to go back to 1.2.4. Any ideas about it?

19

Hi, syedHaroon, thanks, I’m using ionic 1.30, and it works very well

20

Thanks to jdupouy too. I use solution 2 to show the back button, and use to make it work