Visualizzazione gerarchia non rispettata - UI Route (Ionic)

Question

Sto lavorando a un'app Ionic e ho implementato uno schermo on-board con 3 diapositive, del testo e il tag <a href="..."> per andare direttamente alla schermata iniziale.

Ora ho notato che quando ho colpito il tag <a href="..."> sono reindirizzato alla vista corretta ma la barra di navigazione in alto ha un pulsante indietro dove dovrebbe esserci un'icona del menu di un hamburger.

Non sono sicuro se sto implementando correttamente il sistema di routing. Qual è il motivo per cui utilizzare il routing e rispettare la vista gerarchica?

codice HTML (on-boarding):

<ion-view view-title="WNRS" hide-nav-bar="true"> 
    <ion-content scroll="false" has-header="true" class="has-header"> 
     <ion-slide-box on-slide-changed="slideChanged(index)"> 
      <ion-slide> 
      <h4 class="padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper, sapien ac hendrerit porttitor, ipsum ante ultrices ipsum, eu congue arcu libero id enim.</h4> 
      <br><br> 
      <a ui-sref="app.base1"><h2>Play</h2></a> 
      </ion-slide> 
      <ion-slide> 
      <h4 class="padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper, sapien ac hendrerit porttitor, ipsum ante ultrices ipsum, eu congue arcu libero id enim.</h4> 
      <br><br> 
      <a ui-sref="app.base1"><h2>Play</h2></a> 
      </ion-slide> 
      <ion-slide> 
      <h4 class="padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper, sapien ac hendrerit porttitor, ipsum ante ultrices ipsum, eu congue arcu libero id enim.</h4> 
      <br><br> 
      <a ui-sref="app.base1"><h2>Play</h2></a> 
      </ion-slide> 
     </ion-slide-box> 
    </ion-content> 
</ion-view> 

Parte del codice app.js (parte di routing):

// Routes 
app.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 

    .state('app', { 
    cache: false, 
    url: '/app', 
    abstract: true, 
    templateUrl: 'components/sidebar_menu/menu.html' 
    }) 

    .state('app.walkthrough', { 
    url: '/walkthrough', 
    views: { 
     'menuContent': { 
      templateUrl: 'views/walkthrough/walkthrough.html', 
      controller: 'WalkthroughCtrl' 
     } 
     } 
    }) 

    .state('app.base1', { 
    url: '/base1', 
    views: { 
     'menuContent': { 
      templateUrl: 'views/base1/base1.html', 
      controller: 'Base1Ctrl' 
     } 
     } 
    }) 

    .state('app.base2', { 
    url: '/base2', 
    views: { 
     'menuContent': { 
      templateUrl: 'views/base2/base2.html', 
      controller: 'Base2Ctrl' 
     } 
     } 
    }) 

    .state('app.base3', { 
    url: '/base3', 
    views: { 
     'menuContent': { 
      templateUrl: 'views/base3/base3.html', 
      controller: 'Base3Ctrl' 
     } 
     } 
    }) 

    .state('app.add_question', { 
    url: '/add_question', 
    views: { 
     'menuContent': { 
     templateUrl: 'views/add_question/add_question.html', 
     controller: 'AddQuestionCtrl' 
     } 
    } 
    }) 

    $urlRouterProvider.otherwise('/app/walkthrough'); 
}); 

Answer 1

due scelte: 1. Trasforma la pagina del percorso principale in parent e base1, base2, base3 dovrebbe essere pagina figlio. Ma anche in questo modo, se passi da base1 a base2, vedrai comunque il pulsante "indietro" sulla pagina base2.

Oppure si può semplicemente personalizzare l'ione-nav bar in Base1, base2, Base3 come questo:

<ion-view> 
    <ion-nav-bar> 
    <ion-nav-buttons side="left"> 
     <button class="button your-hambuger" menu-toggle="left"> 
     </button> 
    </ion-nav-buttons> 
    <ion-nav-title> 
     Base1 
    </ion-nav-title> 
    </ion-nav-bar> 
    <ion-content> 
    Some content 
    </ion-content> 
</ion-view> 

Update: se si desidera disabilitare il pulsante indietro sulla Base1 per esempio, è possibile aggiungere qui sotto code al controller Base1:

.controller('Base1Ctrl', ['$scope', function ($scope) { 
    //add below code to disable back button 
    $scope.$on('$ionicView.beforeEnter', function (event, viewData) { 
     viewData.enableBack = false; 
    }); 
}]) 

Update2: se si vuole fare un po 'custimization sulla barra di navigazione. Penso che la scelta 2 sia l'unica opzione. Per prima cosa vai sul menu.html e rimuovi parte di ion-nav-bar. Copia questa parte nelle pagine in cui vuoi mostrare ion-nav-bar con un'icona di hamburger. Per quelle pagine che si desidera mostrare tasto posteriore, è possibile aggiungere codice ionico-header-bar per la pagina:

<ion-view view-title="Base2"> 
    <ion-header-bar class="bar-stable" id="nav-bar"> 
    <button ng-click="goState()" class="button back-button buttons button-clear header-item"> 
     <i class="icon ion-ios-arrow-back"></i> 
     <span class="back-text"><span class="default-title">Base1</span></span> 
    </button> 
    <div class="title title-center header-item">Base2</div> 
    <button ng-click="goState2()" class="button back-button buttons button-clear header-item">  
     <span class="back-text"><span class="default-title">Base3</span></span> 
     <i class="icon ion-ios-arrow-forward"></i> 
    </button> 
    </ion-header-bar> 
    <ion-content> 
    Base2 content 
    </ion-content> 
</ion-view> 

È possibile aggiungere la funzione goState() nel controller di base2 o semplicemente dare un ui-sref a quel pulsante