离子视图离子中未显示导航返回按钮答案

【问题标题】：Nav back button not displayed in ion-view ionic离子视图离子中未显示导航返回按钮
【发布时间】：2016-08-13 11:14:18
【问题描述】：

我想在离子视图中创建导航返回按钮。我试试这段代码：

<ion-view view-title="Event details">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
<ion-content >
</ion-content>
</ion-nav-view>

但我没有得到按钮。任何形式的帮助表示赞赏。

【问题讨论】：

标签： ionic-framework

【解决方案1】：

如果没有历史记录，则不会显示“后退”按钮。刷新页面或应用程序时，历史记录会被删除。这在浏览器中开发时很常见。但在设备中不会出现这种情况，因为您无法刷新应用程序。

显示返回按钮的第一种方式

在 index.html 中

<body ng-app="starter" ng-controller="AppCtrl" class="">
    <ion-nav-bar id="mainNav" class="bar-dark">
        <ion-nav-back-button class="button-clear">
            <i class="icon ion-ios-arrow-back"></i>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view animation="slide-left-right" class="scFont appFontSmall"></ion-nav-view>
  </body>

显示返回按钮的第二种方法是您自己处理它。 index.html 可以有与上面相同的代码。但是视图会有这样的东西

<ion-view  view-title="Title"  hide-back-button="true"> 
      <ion-nav-buttons side="left"> 
           <a ng-click="goBackState()" class="button button-icon icon ion-ios-arrow-back"></a>
      </ion-nav-buttons>
      <ion-content>
      </ion-content
 </ion-view>

goBackState() 是一个您可能希望放置在 app.run 函数中的函数

$rootScope.goBackState = function(){
  $ionicViewSwitcher.nextDirection('back');
  $ionicHistory.goBack(); 
}

但请记住，如果没有历史记录，此功能也将不起作用。希望这会有所帮助

【讨论】：