Comment forcer le bouton de retour d'affichage ionique sur certaines pages?

Lors de la navigation d'une page à l'autre, Ionique afficher automatiquement le bouton de retour à la barre de navigation. Cependant, il ya certains cas où ionique ne pas afficher le bouton de retour. Par exemple, lorsque vous naviguez d'une page à onglet à aucune page de l'onglet.

Comment puis-je la force Ionique à l'arrière de l'écran bouton sur certaine page?

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

source d'informationauteur user1995781

  1. 30

    Vous pouvez le dire dans votre contrôleur. Essayez:

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

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

})

    Mais comme LeftyX dit. L'histoire de la fonction de l'onglet de non affichage par onglet est buggé.

  2. 18

    Ionique gère un l'histoire pendant que vous naviguez à partir d'une vue à l'autre.

    $ionicHistory garde la trace de vues que l'utilisateur navigue à travers un
    app. Semblable à la manière d'un navigateur se comporte, une Ioniques application est en mesure de
    garder une trace de la vue précédente, le point de vue actuel, et le vers l'avant
    vue (si il y en a un). Cependant, un navigateur web classique ne conserve
    la trace de l'histoire de la pile de façon linéaire.

    Contrairement aux entreprises traditionnelles de l'environnement du navigateur, les applications et les webapps ont
    en parallèle indépendant des histoires, comme avec les onglets. Si un utilisateur
    naviguer quelques pages de profondeur sur un onglet, puis de passer à un nouvel onglet et
    en arrière, le bouton de retour n'est pas liée à l'onglet précédent, mais à la
    les précédentes pages visitées dans cet onglet.

    Il y a un bug ouvert sur github qui n'a pas été encore fixée (et ne sera corrigé dans la version 2.0) où Adam Bradley états:

    Le bouton retour ne s'affiche pas, parce que quand vous allez dans un onglet, il
    entrez dans la sa propre "histoire", ce qui signifie que chaque onglet dispose de sa propre navigation de retour
    et en avant.

    Donc, fondamentalement, lorsque vous vous déplacez d'onglets à la vue normale, vous allez perdre de la touche retour.

    Ce que vous pouvez faire est de créer un vous-même:

    <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>

    et le placer à l'intérieur de votre point de vue:

    <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>

    Comme vous pouvez le voir, j'ai utilisé ng-click="goBack()" pour le bouton.

    Dans votre contrôleur, vous serait tout simplement:

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

    n'oubliez pas d'injecter $ionicHistory dans votre contrôleur.

    PS: C'est une solution trop simple car il ne vérifie pas si l'histoire a un backview:

    $ionicHistory.viewHistory().backView
  3. 0

    Ajouter les lignes suivantes à l'intérieur de votre 

    <ion-navbar hideBackButton="true">
    <button (click)="back()" class="back-button disable-hover bar-button bar-button-ios back-button-ios bar-button-default bar-button-default-ios show-back-button" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-ios" style=""><span class="button-inner"><ion-icon class="back-button-icon icon icon-ios back-button-icon-ios ion-ios-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-ios" aria-label="arrow back" ng-reflect-name="ios-arrow-back"></ion-icon><span class="back-button-text back-button-text-ios" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-ios">Back</span></span><div class="button-effect"></div></button>