Ionic how to go back inside a nested view

Question

I can't see to get go back transition to work.

I have this abstract view called main that holds this child views.

    <div class="bar bar-header bar-stable">
        <a href="javascript:history.back(-1);" class="button button-icon icon ion-ios-arrow-left"></a>
        <button class="button button-clear button-positive">Log out</button>
    </div>

<div class="clearfix"></div>

<ion-side-menus>
    <!-- Center content -->
    <ion-side-menu-content style="padding-top: 45px">
        <ion-nav-view name="categories"></ion-nav-view>
        <ion-nav-view name="products"></ion-nav-view>
        <ion-nav-view name="payments"></ion-nav-view>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu expose-aside-when="large" style="padding-top: 45px">
        <ion-view>
            <ion-content>
                <ul class="list has-header" id="itemLists">

                </ul>
            </ion-content>
        </ion-view>
        <div class="bar bar-subfooter auto-height" style="padding:0">
            <ul class="list">
                <li class="item">Total <span class="pull-right" id="total"></span></li>
            </ul>
        </div>

        <div class="bar bar-footer">
            <div class="text-center">
                <div class="bar bar-footer bar-positive">
                    <a href="#/main/payments" class="no-underline"><div class="title">Pay</div></a>
                </div>
            </div>
        </div>
    </ion-side-menu>
</ion-side-menus>

This is my app.js that holds all routes.

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngStorage'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider){

    $ionicConfigProvider.views.transition('none');

    $urlRouterProvider.otherwise('/');

    $stateProvider

        .state('login',{
            url: '/',
            templateUrl: 'templates/login.html',
            controller: 'loginController'
        })

        .state('main', {
            url: '/main',
            templateUrl: 'templates/main.html',
            controller:   'mainController',
            abstract: true
        })

        .state('main.categories', {
            url: '/categories',
            views: {
                'categories': {
                    templateUrl: 'templates/categories.html',
                    controller: 'categoriesController'
                }
            }
        })

        .state('main.products', {
            url: '/products/:productId',
            views: {
                'products': {
                    templateUrl: 'templates/products.html',
                    controller: 'productsController'
                }
            }
        })

        .state('main.payments', {
            url: '/payments',
            views: {
                'payments': {
                    templateUrl: 'templates/payments.html',
                    controller: 'paymentsController'
                }
            }
        })

})

I have this state main.products which a child of the main abstract view.

When I click the pay button on the left-down corner, it takes me to the main.payments view.

This is the code for the main.payments view

<ion-view view-title='Payments'>
<ion-content>
    <div class="row">
        <div class="col col-25">
            <a href="#/cash" class="button button-large button-block button-balanced">Cash</a>
        </div>
        <div class="col col-25">
            <a href="#" class="button button-large button-block button-calm">Credit Card</a>
        </div>
        <div class="col col-25">
            <a href="#" class="button button-large button-block button-energized">Discount</a>
        </div>
        <div class="col col-25">
            <button ng-click="cancel()" class="button button-large button-block button-assertive">Cancel</button>
        </div>
    </div>
    <div class="row">
        <div class="col col-25">
            <button ng-click="goBack()" class="button button-large button-block button-royal">Go Back</button>
        </div>
    </div>
</ion-content>

Now when I press the go back button the URL in the page changes to the previous page but the view doesn't transition there, until I refresh the page.

This is my payment controller that handles the go back button transition.

.controller('paymentsController', function($scope, $localStorage, $log, $state, $window, $ionicHistory){

$scope.cancel = function(){

    $localStorage.total= '';

    $state.go('main.categories');

    $window.location.reload();

};

$scope.goBack = function(){

    $ionicHistory.goBack();

}


})

Can you put together a codepen example so that we can test easily ? — JuniorDev

Siddharth Pandey Siddharth Pandey · Accepted Answer · 2015-11-24T19:52:38

Main.payments and main.products are adjacent views not child view, although main.payments.view is child of main.payments and main.payments is child of main

So you can't travel to adjacent state.

if you want to traverse you have to specifically mention the $state.go(STATE_NAME); or you can use ui-sref in button itself

Note: add "cache:false" to abstract view

Ionic how to go back inside a nested view

1 Answers