$ ionicHistory.backView有不正确的状态手动去previous状态时 [英] $ionicHistory.backView has incorrect state when go to previous state manually

查看：483
本文介绍了$ ionicHistory.backView有不正确的状态手动去previous状态时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我做了一个小实验：的http：// codePEN。 IO / hawkphil /笔/ NqMomm？编辑= 101

下面是我的状态流量（点击按钮）：首页 - ＆GT; Fact1 - ＆GT; Fact2 - ＆GT; Fact3 - ＆GT; Fact2

在每个状态的改变，我显示的console.log 为 $ ionicHistory.backView
但是，您可以在 pen.js看到：64 行，奇怪的事情发生了。在 $ ionicHistory.backView 认为，我得到了 app.fact2 从后退按钮，它显示了 app.fact1 为previous状态（行 pen.js：53 ）。这是不正确，对不对？它应该显示 app.fact3 为previous状态，因为我得到了 app.fact2 状态手动单击按钮。我也显示从 $超时值（行 pen.js：59 ），以防万一它是缓慢的。但它仍然是不正确。

  pen.js：56 stateChangeSuccess
pen.js：从64国修改：tabs.home到：tabs.fact1
pen.js：$ 52 $范围手表$ ionicHistory.backView变化来检测。的newval：
pen.js：53 tabs.home
pen.js：58超时后$ 2秒$ ionicHistory.backView（）Statename的。
pen.js：59 tabs.home
pen.js：56 stateChangeSuccess
pen.js：64状态由：tabs.fact1到：tabs.fact2
pen.js：$ 52 $范围手表$ ionicHistory.backView变化来检测。的newval：
pen.js：53 tabs.fact1
pen.js：58超时后$ 2秒$ ionicHistory.backView（）Statename的。
pen.js：59 tabs.fact1
pen.js：56 stateChangeSuccess
pen.js：64状态由：tabs.fact2到：tabs.fact3
pen.js：$ 52 $范围手表$ ionicHistory.backView变化来检测。的newval：
pen.js：53 tabs.fact2
pen.js：58超时后$ 2秒$ ionicHistory.backView（）Statename的。
pen.js：59 tabs.fact2
pen.js：56 stateChangeSuccess
pen.js：64状态由：tabs.fact3到：tabs.fact2
pen.js：$ 52 $范围手表$ ionicHistory.backView变化来检测。的newval：
pen.js：53 tabs.fact1
pen.js：58超时后$ 2秒$ ionicHistory.backView（）Statename的。
pen.js：59 tabs.fact1

问


  1. 如何解决这种情况？也许改写这个委托或以某种方式覆盖它？


  2. 有没有解决办法？正如我在为了依靠正确的 previous状态显示/隐藏的东西。


JS 

  angular.module（'ionicApp'，['离子']）的.config（函数（$ stateProvider，$ urlRouterProvider）{  $ stateProvider
    .STATE（'标签'，{
      网址：/标签
      摘要：真实，
      templateUrl：模板/ tabs.html
      控制器：MainCtrl
    }）
    .STATE（'tabs.home'，{
      网址：/家，
      观点：{
        家标签：{
          templateUrl：模板/ /home.html的，
          控制器：'HomeTabCtrl
        }
      }
    }）
    .STATE（'tabs.fact1'，{
      网址：/ fact1
      观点：{
        家标签：{
          templateUrl：模板/ fact1.html
          控制器：'Fact1TabCtrl
        }
      }
    }）
    .STATE（'tabs.fact2'，{
      网址：/ fact2
      观点：{
        家标签：{
          templateUrl：模板/ fact2.html
          控制器：'Fact2TabCtrl
        }
      }
    }）
    .STATE（'tabs.fact3'，{
      网址：/ fact3
      观点：{
        家标签：{
          templateUrl：模板/ fact3.html
          控制器：'Fact3TabCtrl
        }
      }
    }）
    .STATE（'tabs.about'，{
      网址：/约
      观点：{
        关于标签：{
          templateUrl：模板/ about.html
        }
      }
    }）
    .STATE（'tabs.navstack'，{
      网址：/ navstack
      观点：{
        关于标签：{
          templateUrl：模板/ NAV-stack.html
        }
      }
    }）;
   $ urlRouterProvider.otherwise（/标签/家庭）;}）.controller（'MainCtrl'，函数（$范围，$ rootScope，$超时，$ ionicHistory）{
    $范围。$表（函数（）{
    返回$ ionicHistory.backView（）？ $ ionicHistory.backView（）Statename的：空;
  }，功能（的newval，OLDVAL）{
    的console.log（'。$ $范围手表$ ionicHistory.backView变化检测的newval：'）;
    的console.log（的newval）;
  }）;    $ rootScope。在$（'$ stateChangeSuccess'，函数（事件，toState，toParams，fromState，fromParams）{
    的console.log（'stateChangeSuccess'）;    $超时（函数（）{
      的console.log（'超时后$ 2秒$ ionicHistory.backView（）Statename的。'）;
      的console.log（$ ionicHistory.backView（）Statename的。）;
    }，2000）;
    }）;
}）.controller（'HomeTabCtrl'，函数（$范围，$ rootScope）{
  //执行console.log（'家'）;  $ rootScope。在$（'$ stateChangeSuccess'，函数（事件，toState，toParams，fromState，fromParams）{
    的console.log（+ fromState.name +'到：'从状态变化+ toState.name）;
  }）;
}）.controller（'Fact1TabCtrl'，函数（$范围）{
  //的console.log（'Fact1'）;
}）.controller（'Fact2TabCtrl'，函数（$范围）{
  //的console.log（'Fact2'）;
}）.controller（'Fact3TabCtrl'，函数（$范围）{
  //的console.log（'Fact3'）;
}）;

HTML 

 ＆LT; HTML NG-应用=ionicApp＆GT;＆LT; HEAD＆GT;
  ＆LT;间的charset =UTF-8＆GT;
  ＆LT; META NAME =视CONTENT =初始规模= 1，最大规模= 1，用户可扩展性=无，宽度=设备宽度＆GT;  ＆LT;标题＆GT;导航例＆LT; /标题＆GT;  ＆LT;链接HREF =// code.ionicframework.com /夜间/ CSS / ionic.css的rel =stylesheet属性＆GT;
  ＆LT;脚本的src =// code.ionicframework.com /夜间/ JS / ionic.bundle.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;＆LT;身体GT;  ＆LT;离子导航栏类=扎阳＆GT;
    ＆LT;离子NAV-后退按钮类=按钮图标离子左箭头-C＆GT;
    ＆LT; /离子NAV-后退按钮＆GT;
  ＆LT; /离子导航栏＆GT;  ＆LT;离子NAV-视图＆gt;＆LT; /离子NAV-视图＆gt;
  ＆LT;脚本ID =模板/ tabs.html类型=文/ NG-模板＆GT;
    ＆LT;离子标签类=标签图标，顶部的标签阳性＆GT;      ＆LT;离子分页标题=家图标=离子家的href =＃/标签/家＆GT;
        ＆LT;离子导航视图名称=家庭卡＆GT;＆LT; /离子NAV-视图＆gt;
      ＆LT; /离子标签＆gt;      ＆LT;离子分页标题=关于图标=离子IOS足球的href =＃/标签/约＆GT;
        ＆LT;离子导航视图名称=关于标签＆GT;＆LT; /离子NAV-视图＆gt;
      ＆LT; /离子标签＆gt;      ＆LT; /离子标签＆gt;    ＆LT; /离子标签＆GT;
  ＆LT; / SCRIPT＆GT;  ＆LT;脚本ID =模板/ /home.html的类型=文/ NG-模板＆GT;
    ＆LT;离子查看查看标题=家＆GT;
      ＆LT;离子内容类=填充＆GT;
        ＆所述p为H.;
          ＆LT;一类=按钮图标离子家的href =＃/标签/家＆GT;家庭及LT; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact1＆GT;
            Fact1
          ＆所述; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact2＆GT;
            Fact2
          ＆所述; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact3＆GT;
            Fact3
          ＆所述; / A＆GT;
        ＆所述; / P＆GT;
      ＆LT; /离子含量＆GT;
    ＆LT; /离子视图＆gt;
  ＆LT; / SCRIPT＆GT;  ＆LT;脚本ID =模板/ fact1.html类型=文/ NG-模板＆GT;
    ＆LT;离子查看查看标题=Fact1＆GT;
      ＆LT;离子内容类=填充＆GT;
        ＆所述p为H.;
          ＆LT;一类=按钮图标离子家的href =＃/标签/家＆GT;家庭及LT; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact1＆GT;
            Fact1
          ＆所述; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact2＆GT;
            Fact2
          ＆所述; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact3＆GT;
            Fact3
          ＆所述; / A＆GT;
        ＆所述; / P＆GT;
      ＆LT; /离子含量＆GT;
    ＆LT; /离子视图＆gt;
  ＆LT; / SCRIPT＆GT;  ＆LT;脚本ID =模板/ fact2.html类型=文/ NG-模板＆GT;
    ＆LT;离子查看查看标题=Fact2＆GT;
      ＆LT;离子内容类=填充＆GT;
        ＆所述p为H.;
          ＆LT;一类=按钮图标离子家的href =＃/标签/家＆GT;家庭及LT; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact1＆GT;
            Fact1
          ＆所述; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact2＆GT;
            Fact2
          ＆所述; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact3＆GT;
            Fact3
          ＆所述; / A＆GT;
        ＆所述; / P＆GT;
      ＆LT; /离子含量＆GT;
    ＆LT; /离子视图＆gt;
  ＆LT; / SCRIPT＆GT;  ＆LT;脚本ID =模板/ fact3.html类型=文/ NG-模板＆GT;
    ＆LT;离子查看查看标题=Fact3＆GT;
      ＆LT;离子内容类=填充＆GT;
        ＆所述p为H.;
          ＆LT;一类=按钮图标离子家的href =＃/标签/家＆GT;家庭及LT; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact1＆GT;
            Fact1
          ＆所述; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact2＆GT;
            Fact2
          ＆所述; / A＆GT;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ fact3＆GT;
            Fact3
          ＆所述; / A＆GT;
        ＆所述; / P＆GT;
      ＆LT; /离子含量＆GT;
    ＆LT; /离子视图＆gt;
  ＆LT; / SCRIPT＆GT;  ＆LT;脚本ID =模板/ about.html类型=文/ NG-模板＆GT;
    ＆LT;离子查看查看标题=关于＆GT;
      ＆LT;离子内容类=填充＆GT;
        ＆LT; H3＆GT;创建与你爱的网络技术和LT混合移动应用程序; / H3 GT＆;
        ＆LT; P＆GT;免费和开源，离子提供移动优化的HTML库，建筑高度互动应用CSS和JS组件＆LT; / P＆GT;
        ＆LT; P＆GT;建有萨斯和AngularJS优化＆LT; / P＆GT;
        ＆所述p为H.;
          ＆LT;一类=按钮图标图标向右离子字形权的href =＃/标签/ navstack＆GT;标签导航堆叠式和LT; / A＆GT;
        ＆所述; / P＆GT;
      ＆LT; /离子含量＆GT;
    ＆LT; /离子视图＆gt;
  ＆LT; / SCRIPT＆GT;  ＆LT;脚本ID =模板/ NAV-stack.html类型=文/ NG-模板＆GT;
    ＆LT;离子查看查看标题=标签导航堆栈＆GT;
      ＆LT;离子内容类=填充＆GT;
        ＆LT; P＆GT;＆LT; IMG SRC =htt​​p://ionicframework.com/img/diagrams/tabs-nav-stack.png的风格=宽度：100％＆GT;＆LT; / P＆GT;
      ＆LT; /离子含量＆GT;
    ＆LT; /离子视图＆gt;
  ＆LT; / SCRIPT＆GT;＆LT; /身体GT;＆LT; / HTML＆GT;


解决方案

有很多有关的问题包括历史和导航问题在GitHub上公开。

我猜导航坏了，需要修复。

$ ionicHistory 跟踪推堆栈上的每个访问查看视图。
其实有2个数组有：

  $ ionicHistory.viewHistory（）。意见

和

  $ ionicHistory.viewHistory（）。历史

我想第一个是，第二考虑所有历史的观点对于当前堆栈的历史。结果
不同导航可以有不同的历史：标签，sidemenu等等等等，和离子应该记住每个状态，当你从一个历史切换到另一个。

通过自己的文档阅读你可以找到这样的：


  

不同于传统的浏览器环境，应用程序和web应用有
  平行独立的历史，如标签。如果某个用户
  浏览一个选项卡上的深几页，然后切换到一个新的标签，
  回来，返回按钮没有涉及到previous选项卡，但到了
  previous页面访问该选项卡中。


您可以找到在 currentHistoryId 这里： $ ionicHistory.currentHistoryId（）

我已经改变了你的例子一点点进入主控制器的视图时显示2数组：

  .controller（'MainCtrl'，函数（$范围，$ rootScope，$超时，$ ionicHistory）{
      $范围。在（'$ ionicView.enter'功能（E）{$
        VAR历史= $ ionicHistory.viewHistory（）;
        angular.forEach（history.views，功能（视图，索引）{
            的console.log（'意见：'+ view.stateName）;
        }）;
        angular.forEach（history.histories [$ ionicHistory.currentHistoryId（）。栈，功能（视图，索引）{
            的console.log（'历史堆栈：'+ view.stateName）;
        }）;
    }）;
}）

正如你所看到的，第一个数组的的意见会跟踪你访问过的所有意见。结果
如果你来回走的，如果你显示你previously参观看法不添加元素。

每个视图有两个属性： backViewId 和 forwardViewId 。这2个值似乎是，当元件被添加到集合中的视图的一部分。当你浏览他们不改变。

那么，什么情况是，当你按照顺序：

 首页 - ＆GT; Fact1  - ＆GT; Fact2  - ＆GT; Fact3  - ＆GT; Fact2

离子找到集合中的视图 Fact2 ，得到它的 backViewId （指向 Fact1 ），这就是它将作为一个视图回去使用。

我没有一些调试在code和试图强行背视图自己，但事情搞的一团糟。

我猜他们已经选择了这条路的原因，当你回到根 - 家庭 - 后面的按钮应该被隐藏。
当您按照顺序按预期的事情不工作：

我注意到另一件事是，有时意见加入到这个集合的事实，即使元素已经存在。

您可以尝试的顺序：

 首页 - ＆GT; Fact1  - ＆GT; Fact2  - 主页（按钮）

正如你可以看到现在的后退按钮（在标题）告诉你后面的观点是Fact2事实上控制台显示相同的：


  • 的意见：tabs.home

  • 的意见：tabs.fact1

  • 的意见：tabs.fact2

  • 的意见：tabs.home

  • 历史堆栈：tabs.home

  • 历史堆栈：tabs.fact1

  • 历史堆栈：tabs.fact2

  • 历史堆栈：tabs.home

由于一些奇怪的原因，这个时候一个新的观点已经被添加到集合和规律发生了变化。

有一个 codePEN 这里一些测试。

I did a small experiment: http://codepen.io/hawkphil/pen/NqMomm?editors=101

Here is my state flow (click on the buttons): Home -> Fact1 -> Fact2 -> Fact3 -> Fact2

On each state change, I am showing in console.log for $ionicHistory.backView However, you can see in pen.js:64 line, weird things happen. The $ionicHistory.backView "thinks" that I got to app.fact2 from a back button, and it shows app.fact1 as the previous state (line pen.js:53). This is incorrect, right? It should show app.fact3 as the previous state because I got to app.fact2 state MANUALLY by clicking the button. I also showed the value from $timeout (line pen.js:59) just in case it's slow. But it's still incorrect.

pen.js:56 stateChangeSuccess
pen.js:64 State change from: tabs.home to: tabs.fact1
pen.js:52 $scope.$watch $ionicHistory.backView change detect. newVal:
pen.js:53 tabs.home
pen.js:58 $timeout after 2 sec $ionicHistory.backView().stateName
pen.js:59 tabs.home
pen.js:56 stateChangeSuccess
pen.js:64 State change from: tabs.fact1 to: tabs.fact2
pen.js:52 $scope.$watch $ionicHistory.backView change detect. newVal:
pen.js:53 tabs.fact1
pen.js:58 $timeout after 2 sec $ionicHistory.backView().stateName
pen.js:59 tabs.fact1
pen.js:56 stateChangeSuccess
pen.js:64 State change from: tabs.fact2 to: tabs.fact3
pen.js:52 $scope.$watch $ionicHistory.backView change detect. newVal:
pen.js:53 tabs.fact2
pen.js:58 $timeout after 2 sec $ionicHistory.backView().stateName
pen.js:59 tabs.fact2
pen.js:56 stateChangeSuccess
pen.js:64 State change from: tabs.fact3 to: tabs.fact2
pen.js:52 $scope.$watch $ionicHistory.backView change detect. newVal:
pen.js:53 tabs.fact1
pen.js:58 $timeout after 2 sec $ionicHistory.backView().stateName
pen.js:59 tabs.fact1

QUESTION

  1. How to correct this behavior? Maybe rewrite this delegate or override it somehow?

  2. Is there a workaround? As I rely on the correct previous state in order to show/hide something.

JS

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html",
      controller: "MainCtrl"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.fact1', {
      url: "/fact1",
      views: {
        'home-tab': {
          templateUrl: "templates/fact1.html",
          controller: 'Fact1TabCtrl'
        }
      }
    })
    .state('tabs.fact2', {
      url: "/fact2",
      views: {
        'home-tab': {
          templateUrl: "templates/fact2.html",
          controller: 'Fact2TabCtrl'
        }
      }
    })
    .state('tabs.fact3', {
      url: "/fact3",
      views: {
        'home-tab': {
          templateUrl: "templates/fact3.html",
          controller: 'Fact3TabCtrl'
        }
      }
    })
    .state('tabs.about', {
      url: "/about",
      views: {
        'about-tab': {
          templateUrl: "templates/about.html"
        }
      }
    })
    .state('tabs.navstack', {
      url: "/navstack",
      views: {
        'about-tab': {
          templateUrl: "templates/nav-stack.html"
        }
      }
    });


   $urlRouterProvider.otherwise("/tab/home");

})

.controller('MainCtrl', function($scope, $rootScope, $timeout, $ionicHistory) {
    $scope.$watch(function() {
    return $ionicHistory.backView() ? $ionicHistory.backView().stateName : null;
  }, function (newVal, oldVal) {
    console.log('$scope.$watch $ionicHistory.backView change detect. newVal:');
    console.log(newVal);
  });

    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
    console.log('stateChangeSuccess');

    $timeout(function(){ 
      console.log('$timeout after 2 sec $ionicHistory.backView().stateName');
      console.log($ionicHistory.backView().stateName);
    }, 2000);
    });
})

.controller('HomeTabCtrl', function($scope, $rootScope) {
  // console.log('Home');

  $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
    console.log('State change from: ' + fromState.name + ' to: ' + toState.name);
  });
})

.controller('Fact1TabCtrl', function($scope) {
  // console.log('Fact1');
})

.controller('Fact2TabCtrl', function($scope) {
  // console.log('Fact2');
})

.controller('Fact3TabCtrl', function($scope) {
  // console.log('Fact3');
});

HTML

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Navigation Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>

  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-icon ion-arrow-left-c">
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>


  <script id="templates/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-positive">

      <ion-tab title="Home" icon="ion-home" href="#/tab/home">
        <ion-nav-view name="home-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="About" icon="ion-ios-football" href="#/tab/about">
        <ion-nav-view name="about-tab"></ion-nav-view>
      </ion-tab>

      </ion-tab>

    </ion-tabs>
  </script>

  <script id="templates/home.html" type="text/ng-template">
    <ion-view view-title="Home">
      <ion-content class="padding">
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
            Fact1
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
            Fact2
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
            Fact3
          </a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/fact1.html" type="text/ng-template">
    <ion-view view-title="Fact1">
      <ion-content class="padding">
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
            Fact1
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
            Fact2
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
            Fact3
          </a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/fact2.html" type="text/ng-template">
    <ion-view view-title="Fact2">
      <ion-content class="padding">
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
            Fact1
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
            Fact2
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
            Fact3
          </a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/fact3.html" type="text/ng-template">
    <ion-view view-title="Fact3">
      <ion-content class="padding">
        <p>
          <a class="button icon ion-home" href="#/tab/home"> Home</a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
            Fact1
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
            Fact2
          </a>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
            Fact3
          </a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/about.html" type="text/ng-template">
    <ion-view view-title="About">
      <ion-content class="padding">
        <h3>Create hybrid mobile apps with the web technologies you love.</h3>
        <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
        <p>Built with Sass and optimized for AngularJS.</p>
        <p>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/nav-stack.html" type="text/ng-template">
    <ion-view view-title="Tab Nav Stack">
      <ion-content class="padding">
        <p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
      </ion-content>
    </ion-view>
  </script>

</body>

</html>

解决方案

There are a lot of questions about history and navigation among the issues open on github.

I guess the navigation is broken and needs to be fixed.

$ionicHistory keeps track of the view pushing each visited view on a stack. Actually there are 2 arrays there:

$ionicHistory.viewHistory().views

and

$ionicHistory.viewHistory().histories

I guess the first one is the history of views for the current stack while the second considers all the histories.
Different navigations can have different histories: tabs, sidemenu etc etc, and Ionic should remember each state when you switch from one history to the other.

Reading through their documentation you can find this:

Unlike a traditional browser environment, apps and webapps have parallel independent histories, such as with tabs. Should a user navigate few pages deep on one tab, and then switch to a new tab and back, the back button relates not to the previous tab, but to the previous pages visited within that tab.

You can find the currentHistoryId here: $ionicHistory.currentHistoryId().

I've changed your example a little bit displaying the 2 arrays when entering the view of the main controller:

.controller('MainCtrl', function($scope, $rootScope, $timeout, $ionicHistory) {
      $scope.$on('$ionicView.enter', function(e) {
        var history = $ionicHistory.viewHistory();
        angular.forEach(history.views, function(view, index){
            console.log('views: ' + view.stateName);
        });
        angular.forEach(history.histories[$ionicHistory.currentHistoryId()].stack, function(view, index){
            console.log('history stack:' + view.stateName);
        });
    });
})

As you can see, the first array views keeps track of all the views you have visited.
If you go back and forth in doesn't add elements if you are displaying a view you've previously visited.

Each view has two properties: backViewId and forwardViewId. These 2 values seems to be part of the view when the elements are added to the collection. They don't change when you navigate.

So, what happens is when you follow the sequence:

Home -> Fact1 -> Fact2 -> Fact3 -> Fact2

Ionic finds the view Fact2 in the collection, gets it's backViewId (which points to Fact1) and that's what it will use as a view to go back to.

I didn't some debugging in the code and tried to force the back-view myself but things get messed up.

I guess they've chosen this path cause when you're back to the root - home - the back button should be hidden. Things don't work as expected when you follow the sequence:

Another thing I've noticed is the fact that sometimes views are added to this collection even if the element is already there.

You can try the sequence:

Home -> Fact1 -> Fact2 - Home (button)

As you can see now the back button (in the header) tells you the back view is Fact2 and in fact the console shows the same:

  • views: tabs.home
  • views: tabs.fact1
  • views: tabs.fact2
  • views: tabs.home
  • history stack:tabs.home
  • history stack:tabs.fact1
  • history stack:tabs.fact2
  • history stack:tabs.home

For some strange reason this time a new view has been added to the collection and the regular pattern has changed.

There's a codepen here with some tests.

这篇关于$ ionicHistory.backView有不正确的状态手动去previous状态时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆