javascript - $ionicHistory 不适用于 ionic 标签

Question

我在使用 $ionicHistory 时遇到问题在使用 ion-tabs 的页面上。我使用它导航到上一个 View (使用 goBack())。当我在 View 中放置选项卡时，历史是错误的，后 View 是之前的两个 View 。

为了演示这一点，我创建了一个具有 4 个页面/ View 的演示应用程序 (plunker here)。第 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();
}]);

这是带有选项卡的 View 的样子:

<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":null,"stateId":"second","stateName":"second","url":"/second"}}
BACK=
{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"}

在第三页，又增加了一个 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"}

但在第四页上，使用 ion-tabs，查看历史保持不变。

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

这是使用 ion-tabs 时 $ionicHistory 的错误还是我在选项卡 View 中做错了什么？

Answer 1

尝试包裹 ion-tabs 来避免这个问题

<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