CODEWITHSUNDEEP
angularjscordovaionic-frameworkhybrid-mobile-app
Rasool Ghafari
Rasool Ghafari

Reputation: 4278

ion-nav-back-button does not appear with my project structure?

My problem is that when i navigate from home state to user.tab1 state, the back button does not appear in navbar, how can i solve this problem, i'm new to ionic

I have this states in my project:

    var app = angular.module('myApp', ['ionic']);
    app
    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: './templates/test/home.html'
            })
            .state('user', {
                url: '/user',
                templateUrl: './templates/test/user.html'
            })
            .state('user.tab1', {
                url: '/tab1',
                views: {
                    'tab1': {
                        templateUrl: './templates/test/tab1.html'
                    }
                }
            })
            .state('user.subtab1', {
                url: '/subtab1',
                views: {
                    'tab1': {
                        templateUrl: './templates/test/sub-tab1.html'
                    }
                }
            })
            .state('user.tab2', {
                url: '/tab2',
                views: {
                    'tab2': {
                        templateUrl: './templates/test/tab2.html'
                    }
                }
            });
        $urlRouterProvider.otherwise("/home");
    });

and these are the templates:

index.html

<body ng-app="myApp">
    <ion-nav-bar class="bar bar-calm">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view>
    </ion-nav-view>
</body>

home.html

<ion-view view-title="Home">
    <ion-content>
        <a ui-sref="user.tab1">user.tab1</a>
    </ion-content>
</ion-view>

user.html

<ion-view view-title="User">
    <ion-tabs>
        <ion-tab title="tab1" href="#/user/tab1">
            <ion-nav-view name="tab1"></ion-nav-view>
        </ion-tab>

        <ion-tab title="tab2" href="#/user/tab2">
            <ion-nav-view name="tab2"></ion-nav-view>
        </ion-tab>
    </ion-tabs>
</ion-view>

tab1.html

<ion-view view-title="tab1">
    <ion-content>
        tab1
        <br />
        <a ui-sref="user.subtab1">user.subtab1</a>
    </ion-content>
</ion-view>

tab2.html

<ion-view view-title="tab2">
    <ion-content>
        tab2
    </ion-content>
</ion-view>

sub-tab1.html

<ion-view view-title="sub-tab1">
    <ion-content>
        sub-tab1
    </ion-content>
</ion-view>

UPDATE

i changed states to these, but again when i navigate from home state to user, back button doesn't appear:

$stateProvider
        .state('main', {
            url: '/main',
            abstract: true,
            templateUrl: './templates/test/main.html'
        })
        .state('home', {
            url: '/home',
            parent: 'main',
            views: {
                'home-view': {
                    templateUrl: './templates/test/home.html'
                }
            }
        })
        .state('user', {
            url: '/user',
            parent: 'main',
            views: {
                'user-view': {
                    templateUrl: './templates/test/user.html'
                }
            }
        })

main.html

<ion-nav-view name="home-view">
</ion-nav-view>

<ion-nav-view name="user-view">
</ion-nav-view>

Upvotes: 0

Views: 465

Answers (1)

Andr&#233; Kreienbring
Andr&#233; Kreienbring

Reputation: 2509

The problem here is that your user state is not a child of your home state. In your configuration only the tab1 & tab2 states are childs of the user state.

Hence the back button does not appear.

Example:

    .state('home', {
    url: '/home',
    templateUrl: 'templates//test/home.html'
  })

  .state('home.user', {...

And get familiar with the concept of an abstract state as the root of the navigation. An abstract state is a state that can't be navigated to. As explained in this question.

Upvotes: 1

Related Questions