Javascript $IonichStory不适用于离子选项卡

我在使用

ion选项卡的页面上使用时遇到问题。我使用它导航到上一个视图（使用
goBack（）
）。当我在视图中放置选项卡时，历史记录是错误的，后视图是前两个视图

为了演示这一点，我创建了一个具有4个页面/视图的演示应用程序（plunker）。第1页->第2页->第3页->第4页。最后一页上有选项卡

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

以下是带有选项卡的视图的外观：

<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>

在第三页上，又添加了一个视图：

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"}

但是在第四页上，使用
离子选项卡
查看历史记录保持不变

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"}

使用
离子标签时，
$IonichStory
是否存在缺陷，或者我在标签视图中是否有错误？
尝试包装离子标签以避免此问题

<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>


第4页-表1
历史
{{data}}

第4页-表2
表2的内容


离子标签
引入并行堆栈以维护每个标签的历史记录，因此，
$IonichStory.goBack
更改当前堆栈中的历史记录状态。您可以通过删除选项卡或向所有视图添加选项卡来解决问题。在这篇SO帖子中有一个很好的解释：
对我有效的方法是在页面顶部的离子标签上方添加一个空离子视图

我猜这“欺骗”了$IonichStory，使其相信我的页面呈现的是常规视图，而不是选项卡式视图。
我在这里或多或少遇到了相同的问题：。你试过把第四个州放在第三个州里吗
.state（'third.fourth'）{…
并在那里导航'/third/fourth'
<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>