$ionicHistory does not work with ion-tabs

Question

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

To demonstrate this I have create a demo app (plunker here) that has 4 pages/views. Page 1 -> Page 2 -> Page 3 -> Page 4. The last page has tabs on it.

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();
}]);

This is how the view with tabs 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 view history looks like this:

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, one more 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 the ion-tabs the view 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 tabs view?

Answer 1

Try to wrap 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