如何在某些页面上强制离子显示后退按钮？

Question

当从一个页面导航到另一个页面时,Ionic会自动在导航栏上显示后退按钮.但是,某些情况下离子不显示后退按钮.例如,从标签页导航到无标签页时.

如何强制Ionic在特定页面上显示后退按钮？

使用Javascript:

.state('app.tab.playlists', { //<!-- Tab content page
  url: '/playlists',
  views: {
    'tab-Content': {
      templateUrl: 'templates/playlists.html',
      controller: 'PlaylistsCtrl'
    }
  }
})

.state('app.singer', { //<!-- Not tab content page (if you navigate from tab page to this page, back button will not displayed)
  url: '/singer',
  views: {
    'menuContent': {
      templateUrl: 'templates/singer.html'
    }
  }
})

Answer 1

你可以在控制器中告诉它.尝试:

 .controller('yourCtrl', function($scope) {

$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
  viewData.enableBack = true;
}); 

})

但就像LeftyX说的那样.选项卡到非选项卡视图的历史记录功能是错误的.

Answer 2

当您从一个视图导航到另一个视图时,Ionic管理历史记录.

$ ionicHistory会在用户浏览应用时跟踪视图.与浏览器的行为方式类似,Ionic应用程序能够跟踪前一个视图,当前视图和前向视图(如果有的话).但是,典型的Web浏览器仅以线性方式跟踪一个历史堆栈.

与传统的浏览器环境不同,应用程序和Web应用程序具有并行的独立历史记录,例如标签.如果用户在一个选项卡上深入导航几页,然后切换到新选项卡并返回,则后退按钮不会与之前的选项卡相关,而是与该选项卡中访问的先前页面相关.

在github上有一个bug 尚未修复(并且只会在2.0中修复),其中Adam Bradley说:

后退按钮不会显示,因为当您进入选项卡时,它会输入它自己的"历史记录",这意味着每个选项卡都有自己的前后导航.

所以,基本上,当你从标签转移到常规视图时,你将失去后退按钮.

你能做的就是自己创造一个:

<ion-nav-buttons side="left">
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
        <i class="icon ion-ios-arrow-back"> Back</i> 
    </button>
</ion-nav-buttons>

并将其放在您的视图中:

<ion-view view-title="home">

  <ion-nav-buttons side="left">
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
      <i class="icon ion-ios-arrow-back"> Back</i> 
    </button>
  </ion-nav-buttons>

    <ion-content padding='true' scroll='false' has-footer='false'>

        <div class="card">
            <div class="item item-text-wrap">
                HOME PAGE
            </div>
        </div>

    </ion-content>

</ion-view>

如你所见,我已经习惯ng-click="goBack()"了按钮.

在您的控制器中,您只需:

$scope.goBack = function(){
    $ionicHistory.goBack();
}

别忘了注入$ionicHistory你的控制器.

PS:这是一个过于简化的解决方案,因为它不会检查历史记录是否有后视图:

$ionicHistory.viewHistory().backView