离子框架 $state.go('app.home');在我想去的页面上添加后退按钮（如何删除它）？

Question

我有带侧边栏菜单的应用程序。我在第二页，我正在调用控制器函数，它使用以下命令将我重定向到第一页：

$state.go('app.home');

问题是这个页面现在显示后退按钮下一个侧边栏菜单图标，见下图：

有人能告诉我如何拒绝将后退按钮添加到已分配侧边栏菜单的页面吗？

感谢您的帮助。

app.js 路由器配置如下：

angular.module('Test', ['ionic', 'config', 'Test', 'LocalStorageModule'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider, localStorageServiceProvider) {
   localStorageServiceProvider
     .setPrefix('max_relax');
   $stateProvider

    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/menu.html',
      controller: 'AppCtrl'
    })

    .state('app.home', {
      url: '/home',
      views: {
        'menuContent' :{
          templateUrl: 'templates/home.html',
          controller: 'HomeCtrl'
        }
      }
    })

    .state('app.saved', {
      url: '/saved',
      views: {
        'menuContent' :{
          templateUrl: 'templates/saved.html',
          controller: 'SavedCtrl'
        }
      }
    })
    .state('app.settings', {
      url: '/settings',
      views: {
        'menuContent' :{
          templateUrl: 'templates/settings.html',
          controller: 'SettingsCtrl'
        }
      }
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/home');
});

编辑：

已添加菜单模板：

<ion-side-menus>

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Menu</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/home">
          Home
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/saved">
          Saved
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/settings">
          Settings
        </ion-item>

      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Answer 1

您可以在 $state.go('Yourstate') 之前设置 nextViewOptions。像在你的控制器中，你可以写，

$ionicHistory.nextViewOptions({
  disableBack: true
});
$state.go('app.home');

因此对于该转换，它将清除历史堆栈并将下一个视图设置为历史堆栈的根。

Answer 2

在调用 $state.go('app.home') 之前在控制器中使用 $ionicHistory。

.controller('HomeCtrl', function($scope,...,$ionicHistory) {
  ...
  $ionicHistory.nextViewOptions({
    disableBack: true
  });

  $state.go('app.home');
});

Answer 3

只要您将 <ion-nav-back-button></ion-nav-back-button> 包含在 <ion-nav-bar> 中，您将在使用 app 的任何视图中默认看到后退按钮。

删除 <ion-nav-back-button> 将从使用 app 的所有视图中删除后退按钮。您可以根据您查看的模板有选择地禁用它，方法是在该模板的 <ion-view> 上设置 hide-back-button="true"。

因此，在您的情况下，从 menu.html 中删除 <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button> 将隐藏所有使用 app 的视图的后退按钮。

Answer 4

在你想要的控制器return HomeCtrl:

.controller('SavedCtrl', function($scope,...,$ionicHistory) {
  ...
    $ionicHistory.nextViewOptions({
       disableBack: true
    });

  $state.go('app.home');
 })
.controller('HomeCtrl', function($scope,...,$ionicHistory) {
     $ionicHistory.clearHistory();
 })

Answer 5

$ionicNavBarDelegate.showBackButton(false);

Answer 6

我在使用 Ionic 的侧边菜单时也遇到了这个问题。

在某些情况下，当从侧边菜单中选择一个选项时，结果 page/view 会在导航栏中显示一个后退按钮，这是不应该的（因为选择菜单选项应该重置历史记录）。

问题与在菜单选项中使用 "ng-click" 有关，例如：

<ion-item menu-close ng-click="showStartPage()" ...>

其中 'showStartPage' 是调用 $state.go(...).

的控制器方法

解决方案是这样编码：

<ion-item menu-close href="#/startPage" ...>

这样做后，Ionic（显然）能够正确跟踪导航历史记录。

（我没有尝试过，但可能 "ui-sref" 而不是 "href" 也可以）

离子框架 $state.go('app.home');在我想去的页面上添加后退按钮（如何删除它）？

Ionic framework $state.go('app.home'); is adding back button on page where I want to go (how to remove it)?

javascript

angularjs

angular-ui-router

ionic-framework