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

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.