Ionic how to get back inside a nested view
I do not see to go back to work.
I have this abstract view called main which contains these 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 which contains 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 main main.products which is a child of the main abstract view.
When I click on the pay button in the bottom left corner it puts me in main.payments mode.
This is the code for presenting main.payments
<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 click the back button, the url on the page changes to the previous page, but the view doesn't go there until I refresh the page.
This is my payment controller that handles the 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();
}
})
source to share
Main.payments and main.products are contiguous views, not children, although main.payments.view is a child of the main. Payments and main.payments is a child of the main
Thus, you cannot transition to a neighboring state.
if you want to pass, you must specifically specify $ state.go (STATE_NAME); or you can use ui-sref in the button itself
Note: add "cache: false" to the abstract view
source to share