Ionic framework $state.go('app.home'); is adding back button on page where I want to go (how to remove it)?

JavascriptAngularjsAngular Ui-RouterIonic Framework

Javascript Problem Overview


I have app with sidebar menu. I am on second page and I am calling controller function which redirect me to first page using:

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

Problem is that on this page is now displayed back button next sidebar menu icon, see image below:

enter image description here

Could somebody tell me how to deny to add back button into pages which has assigned sidebar menu?

Thanks for any help.

app.js is with router config is following:

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:

Added menu template:

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

Javascript Solutions


Solution 1 - Javascript

Use $ionicHistory in your controller before calling $state.go('app.home').

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

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

Solution 2 - Javascript

You can set nextViewOptions before $state.go('Yourstate'). Like In your controller, you can write,

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

So for that transition, it will clear the history stack and sets next view as root of the history stack.

Solution 3 - Javascript

At controller which you want to return HomeCtrl:

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

  $state.go('app.home');
 })
.controller('HomeCtrl', function($scope,...,$ionicHistory) {
     $ionicHistory.clearHistory();
 })

Solution 4 - Javascript

$ionicNavBarDelegate.showBackButton(false);

Solution 5 - Javascript

As long as you have <ion-nav-back-button></ion-nav-back-button> included in <ion-nav-bar> you will see a back button by default on any view using app.

Removing <ion-nav-back-button> will remove the back button from all of the views using app. You can selectively disable it based on what template your viewing by setting hide-back-button="true" on the <ion-view> of that template.

So, in your case, removing <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button> from menu.html will hide the back button on all views using app.

Solution 6 - Javascript

I had this problem too when using Ionic's side menu.

In some cases when selecting an option from the side menu the resulting page/view was showing a back button in the navbar, which it shouldn't (because selecting a menu option should reset the history).

The problem was related to using "ng-click" in the menu option, e.g:

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

with 'showStartPage' being a Controller method which calls $state.go(...).

Solution was to code it like this:

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

When done like this, Ionic is (apparently) able to properly keep track of the navigation history.

(I didn't try it out but probably "ui-sref" instead of "href" would work too)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionredromView Question on Stackoverflow
Solution 1 - JavascriptBelluView Answer on Stackoverflow
Solution 2 - JavascriptShripal SoniView Answer on Stackoverflow
Solution 3 - JavascriptHuyLeView Answer on Stackoverflow
Solution 4 - JavascriptPavel KushnirskiyView Answer on Stackoverflow
Solution 5 - JavascriptJosh DurhamView Answer on Stackoverflow
Solution 6 - JavascriptleoView Answer on Stackoverflow