Hierarchical view not respected - UI Route (Ionic)

Question

I am working on an Ionic application and I have implemented a built-in screen with three slides, text and a <a href="..."> tag to go directly to the start screen.

Now I noticed that when I click the <a href="..."> tag, they redirect me to the correct view, but the top panel on top has a back button where the hamburger menu icon should be.

Not sure if I am using the routing system correctly. What is the right to use routing and respect hierarchical representation?

HTML code (on board):

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

Part of the app.js code (part of the 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

Two options: 1. Make the pass page the parent, and base1, base2, base3 - the child. But even so, if you switch from base1 to base2, you will still see the back button on the base2 page.

Or you can simply configure the ion navigation bar in base1, base2, base3 as follows:

 <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: if you want to disable the back button on base1, for example, you can add code below your 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: if you want to do some custimization in the navigation bar. I think option 2 is the only option. First go to your menu.html and delete the ion-nav-bar part. Copy this part to the pages where you want to show the ion navigation bar with the hamburger icon. For those pages on which you want to display the "Back" button, you can add an ion header code to this page:

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

You can add the goState () function to the base2 controller or just point ui-sref to this button