Ionic: No back button when navigating away from ta

Question

I cannot figure out how to get the back button to show when navigating away from a tabbed view to a single page view. The single page view shouldn't have the tab bar. I can make the back button appear when I make the view I'm navigating to part of the tab hierarchy, but that's not what I want.

I've been looking around and can't seem to find a post on this issue. I just might not be searching for the right keywords.

My set up is this...

tabs: tab.feed, tab.friends, tab.account

other view: randompage

Here is my route set up...

.state('randompage', {
    url:'/randompage',
    templateUrl: 'templates/randompage.html',
    controller: 'RandomPageCtrl'
})

.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'templates/tabs.html',
  controller: 'TabCtrl'
})

.state('tab.feed', {
  url: '/feed',
  views: {
    'tab-feed': {
      templateUrl: 'templates/tab-feed.html',
      controller: 'FeedCtrl'
    }
  }
})

Here is the tabs.html

<ion-tabs class="tabs-icon-top tabs-top">
    <!-- Feed Tab -->
    <ion-tab title="Feed" icon="icon ion-ios7-paper" href="#/tab/feed">
        <ion-nav-view name="tab-feed"></ion-nav-view>
    </ion-tab>

    <!-- The rest are just from the tab skeleton -->
    <ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
        <ion-nav-view name="tab-friends"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
        <ion-nav-view name="tab-account"></ion-nav-view>
    </ion-tab>
</ion-tabs>

Here is the tab-feed.html

<ion-view title="Feed">
    <ion-nav-buttons side="right">
        <a class="button button-icon ion-android-camera" href="#/randompage"></a>
    </ion-nav-buttons>
    <ion-content class="padding">
        <h1>Feed</h1>
    </ion-content>
</ion-view>

Here is the randompage.html

<ion-view title="Random Page">
    <ion-content lass="padding">
    </ion-content>
</ion-view>

Everything navigates and shows correctly except the back button is not showing.

Please let me know if you know of any alternate solution, possibly what I may be doing wrong, or need more information.

Thanks!

Answer 1

I have the same issue. By check the source code, ionic sets up an default history stack named root history, views are pushed and popped from the stack as user navigate through the app. However, the tab view is taken out of this default history stack and a new stack will be setup for it.

    splash view --> tab view --> random page (out of tab)
                        |
                        tab1 --> nested view (in tab)
                        |
                        tab2 --> nested view (in tab)

root history stack:

    splash view ---> random page

tab history stack:

    tab view ---> tab1 --> nested view
             ---> tab2 --> nested view

I couldn't find an easy way to change this behavior. But there's a workaround work for my case. I created a normal ionic view and composed the tab view by myself so no new history stack will be created.

<ion-view title="tabs">
    <ion-content padding="false">
        <ion-pane>
            <ion-nav-view name="tab-content"></ion-nav-view>
        </ion-pane>
        <div class="tabs tabs-icon-top" style="position: absolute;bottom: 0;">
            <a class="tab-item">
                <i class="icon ion-home"></i>
                Home
            </a>
            <a class="tab-item">
                <i class="icon ion-star"></i>
                Favorites
            </a>
            <a class="tab-item">
                <i class="icon ion-gear-a"></i>
                Settings
            </a>
        </div>
    </ion-content>
</ion-view>

then you can set up your $stateProvider to load different tab view into tab-content to mimics the ion-tabs behavior. Of course you have to maintain the active states of tabs by yourself.

Answer 2

I am sorry I don't have enough reputation to add a comment.

Ryan's answer worked like a charm for me(not the modify ionic source part), I just want to add a point that if one uses

ng-click="$ionicGoBack()"

instead of

ng-click="goBack()"

the Javascript can be omitted.

Answer 3

This has been a long time problem for me as well. While the history stack is broken in this use case, 'backView' in the history object is correct. The full history object can be seen with this log line:

console.log( JSON.stringify($ionicHistory.viewHistory(), null, 4) );

My solution is to manually add in a Back button on global pages.

Global page html:

<ion-view view-title="Help">

<ion-nav-buttons side="left">
 <button class="button button-clear" ng-click="goBack()"><i class="icon ion-arrow-left-c" ></i> Back</button>
</ion-nav-buttons>

Javascript:

$scope.goBack = function() {
    $ionicHistory.goBack();
};

---

Another alternative is to modify the ionic source. Replace enabledBack() in ionic.bundle.js with this:

enabledBack: function(view) {
  //original code
  //var backView = getBackView(view);
  //return !!(backView && backView.historyId === view.historyId);

  //new code to show back
  var backView = viewHistory.backView;
  return backView != null;
},