CODEWITHSUNDEEP
angularjsionic-framework
Mahindar Boregam
Mahindar Boregam

Reputation: 855

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>

Upvotes: 2

Views: 8700

Answers (4)

Sabba Keynejad
Sabba Keynejad

Reputation: 8591

This worked for me. Drop it in your controller. This forces the Back button to display. Not the most elegant. but it works.

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

Hope that helps

Upvotes: 0

Dibyajytoi Kabi
Dibyajytoi Kabi

Reputation: 43

use ion-pane in place of ion-view inside tab-one.html and tab-two.html

Upvotes: 1

Pedro Justo
Pedro Justo

Reputation: 4289

@mahindar that is just a workaround.

there is already an opened issue to this problem in https://github.com/driftyco/ionic/issues/2997

Upvotes: 0

Mahindar Boregam
Mahindar Boregam

Reputation: 855

Finally got it working by adding the back button manually to tabs page. used $ionicGoBack($event) in ng-click event of back button. Here is the complete code. So far i didn't faced any problem.

Upvotes: 2

Related Questions