web-dev-qa-db-ja.com

Ionic framework $ state.go（ 'app.home'）;私が行きたいページに戻るボタンを追加していますか（削除する方法）？

サイドバーメニュー付きのアプリがあります。私は2ページ目にいて、次を使用して最初のページにリダイレクトするコントローラー関数を呼び出しています：

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

問題は、このページに次のサイドバーメニューアイコンの戻るボタンが表示されるようになったことです。下の画像をご覧ください。

enter image description here

誰かがサイドバーメニューを割り当てたページに戻るボタンを追加することを拒否する方法を教えてもらえますか？

助けてくれてありがとう。

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>
javascriptangularjsangular-ui-routerionic-framework
50
redrom

$state.go('app.home')を呼び出す前に、コントローラーで $ionicHistory を使用します。

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

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

NextViewOptionsは、$ state.go（ 'Yourstate'）の前に設定できます。コントローラーのように、次のように記述できます。

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

そのため、この移行では、履歴スタックをクリアし、次のビューを履歴スタックのルートとして設定します。

26
Shripal Soni

HomeCtrlを返したいコントローラーで：

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

  $state.go('app.home');
 })
.controller('HomeCtrl', function($scope,...,$ionicHistory) {
     $ionicHistory.clearHistory();
 })
4
HuyLe
$ionicNavBarDelegate.showBackButton(false);
3
Pavel Kushnirskiy

Ionicのサイドメニューを使用するときにもこの問題が発生しました。

場合によっては、サイドメニューからオプションを選択すると、結果として得られるページ/ビューのnavbarに戻るボタンが表示されますが、これは表示されません（メニューオプションを選択すると履歴がリセットされるため）。

この問題は、メニューオプションで「ng-click」を使用することに関連していました。例：

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

'showStartPage'は、$ state.go（...）を呼び出すControllerメソッドです。

解決策は次のようにコーディングすることでした：

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

このようにすると、Ionicは（明らかに）ナビゲーション履歴を適切に追跡できます。

（私はそれを試していないが、おそらく「href」の代わりに「ui-sref」も機能するだろう）

2
leo

<ion-nav-back-button></ion-nav-back-button>に<ion-nav-bar>が含まれている限り、appを使用するすべてのビューにデフォルトで戻るボタンが表示されます。

<ion-nav-back-button>を削除すると、appを使用してすべてのビューから戻るボタンが削除されます。テンプレートのhide-back-button="true"に<ion-view>を設定することにより、表示するテンプレートに基づいて選択的に無効にすることができます。

したがって、あなたの場合、<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>からmenu.htmlを削除すると、appを使用するすべてのビューで[戻る]ボタンが非表示になります。

2
Josh Durham