Ionic: No back button when navigating away from tab view

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

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;
},