$ ionicHistory does not work with ion tabs

Question

I'm having problems using $ionicHistory on pages that use ion-tabs . I use this to go back to the previous view (using goBack() ). When I put tabs in a view, the story is wrong, back view is two views before.

To demonstrate this, I created a demo application (plunker here ) that has 4 pages / views. Page 1 → Page 2 → Page 3 → Page 4. The last page has tabs.

 angular .module("demoapp", ['ionic']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){ $stateProvider .state('first', { url: '/', controller: 'firstController', templateUrl: 'first.html', }) .state('second', { url: '/second', controller: 'secondController', templateUrl: 'second.html', }) .state('third', { url: '/third', controller: 'thirdController', templateUrl: 'third.html', }) .state('fourth', { url: '/fourth', controller: 'fourthController', templateUrl: 'fourth.html', }); $urlRouterProvider.otherwise("/"); }]) .factory("historyFactory", ['$ionicHistory', function($ionicHistory){ var show = function() { var text = ""; var vh = $ionicHistory.viewHistory(); if(vh !== null) { text += "VIEWS=" + JSON.stringify(vh.views); text += "BACK=" + JSON.stringify(vh.backView); } return text; } return { show : show, } }]) .controller("firstController", [ '$scope', '$location', function($scope, $location){ $scope.next = function() { $location.path("/second"); }; }]) .controller("secondController", [ '$scope', '$location', '$ionicHistory', 'historyFactory', function($scope, $location, $ionicHistory, historyFactory){ $scope.next = function() { $location.path("/third"); }; $scope.prev = function() { $ionicHistory.goBack(); }; var init = function() { $scope.data = historyFactory.show(); }; init(); }]) .controller("thirdController", [ '$scope', '$location', '$ionicHistory', 'historyFactory', function($scope, $location, $ionicHistory, historyFactory){ $scope.next = function() { $location.path("/fourth"); }; $scope.prev = function() { $ionicHistory.goBack(); }; var init = function() { $scope.data = historyFactory.show(); }; init(); }]) .controller("fourthController", [ '$scope', '$ionicHistory', 'historyFactory', function($scope, $ionicHistory, historyFactory){ $scope.prev = function() { $ionicHistory.goBack(); }; var init = function() { $scope.data = historyFactory.show(); }; init(); }]); 

Here's what the tabbed view looks like:

 <ion-view> <ion-tabs class="tabs-balanced"> <ion-tab title="Tab One"> <ion-header-bar class="bar-balanced"> <div class="buttons"> <button class="button button-icon ion-ios-arrow-back" ng-click="prev()"></button> </div> <h1 class="title">Page 4 - Tab 1</h1> </ion-header-bar> <ion-content class="has-header"> <h3>History</h3> <p>{{data}}</p> </ion-content> </ion-tab> </ion-tabs> </ion-view> 

On the second page, the browsing history is as follows:

 VIEWS= {"002":{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"}, "003":{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":null,"stateId":"second","stateName":"second","url":"/second"}} BACK= {"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"} 

On the third page, another view is added:

 VIEWS= {"002":{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"}, "003":{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"}, "004":{"viewId":"004","index":2,"historyId":"root","backViewId":"003","forwardViewId":null,"stateId":"third","stateName":"third","url":"/third"}} BACK= {"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"} 

But on the fourth page with ion-tabs browsing history remains the same.

 VIEWS= {"002":{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"}, "003":{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"}, "004":{"viewId":"004","index":2,"historyId":"root","backViewId":"003","forwardViewId":null,"stateId":"third","stateName":"third","url":"/third"}} BACK= {"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"} 

Is this a bug with $ionicHistory when using ion-tabs or am I doing something wrong in the tab view?

Answer 1

Try to wrap the ion tabs to avoid this problem.

 <ion-view> <div> <ion-tabs class="tabs-balanced"> <ion-tab title="Tab One"> <ion-header-bar class="bar-balanced"> <div class="buttons"> <button class="button button-icon ion-ios-arrow-back" ng-click="prev()"></button> </div> <h1 class="title">Page 4 - Tab 1</h1> </ion-header-bar> <ion-content class="has-header"> <h3>History</h3> <p>{{data}}</p> </ion-content> </ion-tab> <ion-tab title="Tab Two"> <ion-header-bar class="bar-balanced"> <div class="buttons"> <button class="button button-icon ion-ios-arrow-back" ng-click="prev()"></button> </div> <h1 class="title">Page 4 - Tab 2</h1> </ion-header-bar> <ion-content class="has-header"> <p>Content of tab 2.</p> </ion-content> </ion-tab> </ion-tabs> </div> </ion-view> 

http://plnkr.co/edit/pVDu9e7QZHzMt3A154i7?p=preview

Answer 2

ion-tabs introduce parallel stacks to save the history of each tab, so $ionicHistory.goBack changes the state of the story in the current stack. You can solve the problem by deleting a tab or adding tabs to all views. There is a great explanation in this SO post: fooobar.com/questions/144609 / ...

Answer 3

What worked for me was to add an empty ionic view above the ion tabs at the very top of the page.

I suppose this "tricked" $ ionicHistory into believing that my page displayed a normal view, not a tab.