Ionic/AngularJS多级子视图路由下ion-nav-back-button失效求助

问题根源 #

Ionic的<ion-nav-back-button>依赖自身维护的视图历史栈工作，你当前的路由配置将insights1/insights2作为tabs.facts2的内嵌子路由，子视图渲染在facts2页面内部的<ion-nav-view>中，属于同页面内的子视图切换，不会触发Ionic全局导航栈的层级新增，因此返回按钮无法识别到需要回退的上一级，点击无响应。

修复方案 #

方案一：调整路由层级（推荐） #

把insights1和insights2从tabs.facts2的子路由改成和facts2平级的独立路由，渲染目标统一用home-tab顶层导航容器，跳转时会自动推入新的历史栈层级，返回按钮即可正常工作：

1. 修改路由配置

// 移除原来的tabs.facts2.insights1、tabs.facts2.insights2配置，替换为以下内容
.state('tabs.insights1', {
  url: "/facts2/insights1/",
  views: {
    'home-tab': {
      templateUrl: "templates/insights1.html"
    }
  }
})
.state('tabs.insights2', {
  url: "/facts2/insights2/",
  views: {
    'home-tab': {
      templateUrl: "templates/insights2.html"
    }
  }
})

2. 修改facts2页面代码

<div class="button-bar">
  <!-- 移除nav-transition="none"，修改ui-sref指向新路由 -->
  <a class="button" ui-sref="tabs.insights1"> Insights Type 1</a>
  <a class="button" ui-sref="tabs.insights2"> Insights Type 2</a>
</div>
<!-- 删除页面内部的<ion-nav-view name="insights-tab"></ion-nav-view>，无需再保留内嵌子视图容器 -->

方案二：手动实现回退逻辑（适合必须保留子路由嵌套的场景） #

如果业务要求必须把insights页面嵌在facts2内部，可自定义返回按钮逻辑：

1. 给返回按钮绑定点击事件

<ion-nav-back-button ng-click="customBack()">
</ion-nav-back-button>

2. 控制器添加回退逻辑

.controller('HomeTabCtrl', function($scope, $state, $ionicHistory) {
  $scope.customBack = function() {
    // 当前在insights子页面时，手动跳转到facts2页
    if($state.is('tabs.facts2.insights1') || $state.is('tabs.facts2.insights2')) {
      $state.go('tabs.facts2');
    } else {
      // 其他场景走默认回退逻辑
      $ionicHistory.goBack();
    }
  }
})

内容的提问来源于stack exchange，提问作者vinoli