How to get back button in Ion-tabs page

I’m using ionic. When I navigate from home page to tabs page ‘back’ button is getting disappeared and I can’t go back to the home page once i enter into the tabs page. I tried to search online but couldn’t find solution. Is there any workaround or am i doing wrong anywhere. Here is my code index.html

<html data-ng-app="tabsBack">
<head>
    <meta charset="utf-8" />
    <title>BlankCordovaApp1</title>

    <!-- BlankCordovaApp1 references -->
    <link href="css/index.css" rel="stylesheet" />
    <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css" rel="stylesheet" />

    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
    <script>
        var app = angular.module('tabsBack', ['ionic']);
        app.config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('home', {
                    url: "/",
                    templateUrl: "home.html"
                })
                .state('tab', {
                    url: "/tab",
                    templateUrl: "tab.html"
                })
                .state('tab.one', {
                    url: '/one',
                    views: {
                        'tab-one': {
                            templateUrl: 'templates/tab-one.html',
                        }
                    }
                })
                .state('tab.two', {
                    url: '/two',
                    views: {
                        'tab-two': {
                            templateUrl: 'templates/tab-two.html',
                        }
                    }
                })

            $urlRouterProvider.otherwise('/');
        })
    </script>
    <script src="scripts/index.js"></script>
</head>
<body>
    <ion-nav-bar>
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
</body>
</html>

Home.html

<ion-view view-title="home">
    <ion-content>
        home<br />
        <a data-ui-sref="tab">tab</a><br />
    </ion-content>
</ion-view>
tab.html

<ion-tabs class="tabs-icon-top">
    <ion-tab title="One" icon="icon ion-ios7-paper" href="#/tab/one">
        <ion-nav-view name="tab-one"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Two" icon="icon ion-ios7-paper" href="#/tab/two">
        <ion-nav-view name="tab-two"></ion-nav-view>
    </ion-tab>
</ion-tabs>

tab-one.html

<ion-view title="One">
    <ion-content>
        <h1>One</h1>
    </ion-content>
</ion-view>

tab-two.html

<ion-view title="Two">
    <ion-content>
        <h1>Two</h1>
    </ion-content>
</ion-view>

in tab-one.html added this
<ion-nav-buttons> <button class="button" ng-click="myGoBack()"><i class="ion-arrow-left-c"></i> Back</button> </ion-nav-buttons>
and in controller
$scope.myGoBack = function () { $ionicHistory.goBack(); };
it works for first time but when i come back to tabs page second time the back is not getting displayed.I don’t know whether it is a issue with ionic or not but it became a nightmare for me. I would be happy if anyone can help. Thanks

here it is http://plnkr.co/edit/BwTzR4mXXsnnF5GvTaZW?p=preview
. Click the tab link, then click back and now click the tab link again
the back button won’t appear. I think header itself is not updating.

It had to do with your link to tab.one

I changed the function to just uset $state.go

We’re having similar issues. We’re using tabs in a nested state and would like to control whether to display the back button or not. I don’t want to add an extra “manual” back button, but use the one that’s there (hidden).

Also, the title of a nav-view in a tab view is ignored, always showing the title of the tab in the nav bar title. How are we supposed to set a “custom” title of the nav bar?

What is the rationale behind these behaviors?

Thanks for this but it is effecting other page back button. if tabs page is called from different page(i added a new page sam.html) it is effecting the back button in the sam.html. The back button in sam page is hiding and showing every time we go to tabs page and come back to sam.html. http://plnkr.co/edit/rfww8kaAVjn6NpRMidUB?p=preview

Today I faced one more issue with tabs page. I added one more tabs page(three and Four tabs). When I navigate from 'sam to ‘tab1’ page , then come back to ‘sam’ page and now going to ‘tab2’ page it is showing previous tab pages. Sorry if I couldn’t explain the problem clearly.Here is the plunker http://plnkr.co/edit/dEQjiWaeiCaQtF6wMnCC?p=preview . I don’t know whether it is ionic issue or i messed it up. Somebody please help me in correcting it. Thank you

Finally got it working. Here is the code http://plnkr.co/edit/cdzh3HZwCmNfACWRbozZ?p=preview. So far i didn’t faced any problem :smile:

1 Like

Thanks its working :slight_smile: but i have 2-3 same page so when i click back it goes to home only so is there any solution for it

no, this is not solved at all