web-dev-qa-db-fra.com

Ionic framework $ state.go ('app.home'); ajoute le bouton de retour sur la page où je veux aller (comment l'enlever)?

J'ai une application avec un menu dans la barre latérale. Je suis sur la deuxième page et j'appelle la fonction de contrôleur qui me redirige vers la première page en utilisant:

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

Le problème est que sur cette page est maintenant affichée le bouton Précédent Icône de menu de la barre latérale suivante, voir l'image ci-dessous:

enter image description here

Quelqu'un pourrait-il me dire comment refuser l'ajout d'un bouton de retour dans les pages auxquelles un menu de la barre latérale a été attribué?

Merci pour toute aide.

app.js est avec le routeur config est la suivante:

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');
});

Edit:

Ajout du modèle de menu:

<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

Utilisez $ionicHistory dans votre contrôleur avant d'appeler $state.go('app.home').

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

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

Vous pouvez définir nextViewOptions avant $ state.go ('Yourstate'). Comme dans votre contrôleur, vous pouvez écrire,

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

Donc, pour cette transition, la pile d'historique sera effacée et la vue suivante sera définie comme racine de la pile d'historique.

26
Shripal Soni

Au contrôleur auquel vous voulez retourner 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

J'ai eu ce problème aussi en utilisant le menu latéral de Ionic.

Dans certains cas, lors de la sélection d'une option dans le menu latéral, la page/vue résultante affichait un bouton Précédent dans la barre de navigation, ce qui ne devrait pas (car la sélection d'une option de menu devrait réinitialiser l'historique).

Le problème était lié à l’utilisation de "ng-click" dans l’option de menu, par exemple:

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

avec 'showStartPage' étant une méthode de contrôleur qui appelle $ state.go (...).

La solution était de le coder comme ceci:

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

Lorsque cela est fait, Ionic est (apparemment) capable de garder une trace de l'historique de navigation.

(Je ne l'ai pas essayé mais probablement "ui-sref" au lieu de "href" fonctionnerait aussi)

2
leo

Tant que vous avez <ion-nav-back-button></ion-nav-back-button> inclus dans <ion-nav-bar> vous verrez un bouton Précédent par défaut sur n’importe quelle vue utilisant app.

Enlever <ion-nav-back-button> supprime le bouton Précédent de toutes les vues avec app. Vous pouvez le désactiver de manière sélective en fonction du modèle que vous visualisez en définissant hide-back-button="true" sur le <ion-view> de ce modèle.

Donc, dans votre cas, enlever <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button> de menu.html cachera le bouton Précédent sur toutes les vues en utilisant app.

2
Josh Durham