Ionic framework $state.go('app.home'); is adding back button on page where I want to go (how to remove it)?
Solution 1
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
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
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
$ionicNavBarDelegate.showBackButton(false);
Solution 5
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
.
redrom
Updated on July 17, 2022Comments
-
redrom almost 2 years
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:
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>
-
Diego Sarmiento about 9 years$ionicViewService is now deprecated, we have to use $ionicHistory instead. Everything else remains the same.
-
ozkary over 8 yearswhen using $state.go, we could just reset the state history, so the framework does not add the back button. This is ideal when going from a login view to the home view: $ionicHistory.nextViewOptions({ historyRoot: true }) $state.go("app.home");