Ion-nav-back-button doesn't appear with my project structure?

rasool · October 16, 2015, 10:28am

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>

yurinondual · October 23, 2015, 9:34am

if you create a single holding state for example ‘app’ and have all other states as children of this holding stae, then back button should appear.

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url: '/app',
            abstract: true
            templateUrl: './templates/test/main-app-template.html'
        })
        .state('app.home', {
            url: '/home',
            templateUrl: './templates/test/home.html'
        })
        .state('app.user', {
            url: '/user',
            templateUrl: './templates/test/user.html'
        })
        .state('app.user.tab1', {
            url: '/tab1',
            views: {
                'tab1': {
                    templateUrl: './templates/test/tab1.html'
                }
            }
        })
        .state('app.user.subtab1', {
            url: '/subtab1',
            views: {
                'tab1': {
                    templateUrl: './templates/test/sub-tab1.html'
                }
            }
        })
        .state('app.user.tab2', {
            url: '/tab2',
            views: {
                'tab2': {
                    templateUrl: './templates/test/tab2.html'
                }
            }
        });

rasool · October 23, 2015, 9:36am

Thank you @yurinondualm, and what should be the content of main-app-template.html?

yurinondual · October 23, 2015, 9:38am

Something like that:

<ion-view hide-back-button="false">
<ion-side-menus>
	<ion-side-menu side="left">
		<ion-nav-view name="side-menu-view"></ion-nav-view>
	</ion-side-menu>
	<ion-side-menu-content drag-content="false">
		<ion-nav-bar align-title="center">
			<ion-nav-buttons side="left">
				<button menu-toggle="left" class="button button-icon icon ion-navicon">

				</button>
			</ion-nav-buttons>
			<ion-nav-back-button class="button-clear button-icon">
				<!-- <i class="icon ion-ios7-arrow-back"></i> Back -->
				<!-- <i class="ion-arrow-left-c"></i> Back -->
				Back
			</ion-nav-back-button>
		</ion-nav-bar>
		<ion-nav-view name="main-view">
		</ion-nav-view>
	</ion-side-menu-content>
</ion-side-menus>
</ion-view>

yurinondual · October 23, 2015, 9:44am

This is my app’s config (sorry for coffeescript)

$stateProvider
.state "App",
  url: "/app"
  abstract: true
  controller: "appController"
  templateUrl: "templates/app-main-template.html"
  
.state "App.Tabs",
  abstract: true
  url: "/tabs"
  cache: false
  views:
    "main-view":
      templateUrl: "templates/tabs.html"
      controller: "tabsController"
    "side-menu-view":
      templateUrl: "templates/side-menu.html"
      controller: "sideMenuController"

And then for example if you want view without tabs you can do:

.state "App.Walkthrough",
  url: "/walkthrough"
  views:
    "main-view":
      templateUrl: "templates/walkthrough.html"
      controller: "walkthroughController"

And view with Tabs:

.state "App.Tabs.Login",
  url: "/login"
  views:
    "auth-tab-view":
      templateUrl: "templates/login.html"
      controller: "loginController"

rasool · October 23, 2015, 9:47am

I changed states as you said, and create main-app-template with this content:

<ion-view hide-back-button="false">
    <ion-nav-bar class="bar bar-calm">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view>
    </ion-nav-view>
</ion-view>

and this is index.html

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link rel="stylesheet" href="lib/ionic/css/ionic.css" />

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="app">
    <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>
</html>

but currently, back-button doesn’t appear when navigate from home state to user state!!!

yurinondual · October 23, 2015, 9:50am

Sorry but you have to figure this yourself. Try giving name to your <ion-nav-view> inside of main-app-template and remove back button from index.html

my index.html is like this:

<body id="mainApp" ng-app="mainApp">
	<ion-nav-view></ion-nav-view>
</body>

rasool · October 23, 2015, 10:30am

Dear @yurinondual, this is www folder of my project, could you change the states and templates to working correctly, please?

https://goo.gl/KG3fXC

th app preview:

https://goo.gl/PPchYL

it’s very critical and i couldn’t solve it.

brandyshea · October 23, 2015, 8:46pm

A back button will not show when navigating from a non tabbed state to a tabbed state, there are some issues for this here:

There’s a large github issue on this here:

Unfortunately, we will not be fixing it in 1.0 because of the limitations of ui-router. Fortunately, Ionic version 2.0 supports this and it is currently in Alpha: Announcing Ionic 2.0 Alpha - Ionic Blog

rasool · October 24, 2015, 1:51pm

@brandyshea, Thank you, i installed ionic2@alpha and created a simple app that have only to page, home page and tabs page, and when navigate from home to tabs, back-button of navigation doesn’t appear again!!!
but you said that this problem is solved in ionic2@alpha!!!

yurinondual · October 26, 2015, 2:35pm

Here you go. http://plnkr.co/edit/Y91jSaDAF5i0ibGYmi7T?p=preview

I had to do your job for you

rasool · October 26, 2015, 3:20pm

Thanks for your effort, but if you change $urlRouterProvider.otherwise("/app/tabs/tab1"); to $urlRouterProvider.otherwise("/app/home");, it doesn’t work properly.
If you change the code, when the page loaded completely, the back button appears in nav-bar, and when navigate from home to tabs, the back button doesn’t appears!!

yurinondual · October 26, 2015, 3:33pm

Sorry but you will have to do this yourself, just use my code as an example

rasool · October 26, 2015, 3:35pm

I know, but as you seen, @brandyshea said that it is bug of ionic and doesn’t resolved yet. i’m mean this should be handled by ionic and is a simple problem. thank you dear @yurinondual

yurinondual · October 26, 2015, 4:08pm

You can create your own back button like I did in the example above and use ionicHistory to go back

Topic		Replies	Views
Why ion-nav-back-button is not appearing in my project? ionic-v1	1	657	March 13, 2017
Ion nav back button hides whe using component directives as templates ionic-v1	0	613	April 1, 2016
Ion-nav-button Not Appearing ionic-v1	3	1382	February 28, 2017
Ion-nav-back-button display none when navigate to new page? ionic-v1	3	1645	September 15, 2015
Navigating from tabs template to another view not showing back button ionic-v1	0	553	May 19, 2015

Ion-nav-back-button doesn't appear with my project structure?

Related topics