Dear Sir,
I am facing the problem, I created a home button in the bottom of the page. when I go inside pages of relative like Search->Search Result -> Detail Item. When I clicked home button bottom of the page its showing back button on home page. so how I can customized the back button and menu button of each page
you can customize backbutton using $ionicPlatform.registerBackButtonAction in each page…
Thanks for the reply but problem is that when I came on home page its showing back button rather than menu button.
can you show me your code in your home button?..
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-nav-title>
<img src="img/logo.png" style="height: 40px; text-align:center" />
</ion-nav-title>
<ion-nav-buttons side="right">
<button class="button button-icon ion-android-more-vertical" ng-click="openPopover($event)"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
<ion-view hide-back-button="true">
<img src="img/logo.png" style="height: 40px; text-align:center">
<div style="background-image: url('img/quick_contacts_side-.png'); width: 100%; background-repeat: no-repeat;background-position:center; background-size:cover;">
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div style="background-color: white; opacity: 0.6; text-align: center">
<div class="col"><h3>Welcome to <br> Ajman Business Map</h3></div>
</div>
</div>
<div style="padding: 20px; text-align: center">
<br><br>
<div class="row">
<div class="col col-50" onclick="Search()"><i class="fa fa-map-o fa-2x searchbybusiness"></i><br />Search By<br />Business Name</div>
<div class="col col-50" onclick="SearchActivity()"><i class="fa fa-map-marker fa-2x sarchbyactivity"></i><br />Search By<br />Business Activity</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="col col-50" onclick="aboutus()"><i class="fa fa-info fa-2x abouticon"></i><br />About Chamber</div>
<div class="col col-50" onclick="contactus()"><i class="fa fa-globe fa-2x contacticon"></i><br />Contact Us</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
<div class="col col-100"><i class="fa fa-map-pin fa-2x pinmeicon"></i><br />Pin My Location</div>
</div>
<!--<button class="button button-dark" onclick="Search()">
<i class="icon ion-search"></i> Search By Business Name
</button>
<button class="button button-dark" onclick="SearchActivity()">
<i class="icon ion-search"></i> Search By Business Activity
</button>-->
</div>
</ion-view>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-nav-title>
<img src="img/logo.png" style="height: 40px; text-align:center" />
</ion-nav-title>
<ion-nav-buttons side="right">
<button class="button button-icon ion-android-more-vertical" ng-click="openPopover($event)"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent">
<!-- Here Contents will go on -->
</ion-nav-view>
<ion-footer-bar class="cust-footer">
<div class="row">
<div class="col" style="margin-top: -10px"><a href="#/app" menu-close style="color:white; text-decoration:none"><i class="fa fa-home fa-2x" onclick="home()"></i></a></div>
<div class="col col-75">© Ajman Chamber of Commerce</div>
</div>
</ion-footer-bar>
</ion-side-menu-content>
<ion-side-menu side="left" class="left-bar">
<div>
<ion-content>
<ion-list>
<ion-item class="left-bar">
<div class="logo-header">
<img src="img/main-logo.png" class="img-circle" />
</div>
</ion-item>
<ion-item menu-close class="left-bar">
<a href="#/app/welcome"><i class="fa fa-home"></i> Home</a>
</ion-item>
<!--<ion-item menu-close ng-click="login()">
Login
</ion-item>-->
<ion-item menu-close class="left-bar">
<a href="#/app/search"><i class="fa fa-map-o"></i> Search by Business Name</a>
</ion-item>
<ion-item menu-close class="left-bar">
<a href="#/app/searchActivity"><i class="fa fa-map-marker"></i> Search by Activity Name</a>
</ion-item>
<!--<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
<ion-item menu-close href="#/app/tabs">
Tabs
</ion-item>-->
</ion-list>
</ion-content>
</div>
</ion-side-menu>
i think you think the menu button is correct but it is just the icon of navicon… but the truth is it is the nav back button… did you have a nav back button in your code?
No, no custom code for nav back button. it is working as a default behaviour of back button.
but it is having a nav back button function… can you add enable-menu-with-back-views=“false” in you ionic side menu
I tried but now menu button on home page is disappear and still page heading showing previous page.
that’s because it is not really side menu icon… it is the nav back button…
Its really difficult to handle this one. there is no template in where I want to put back button and if I dont want I can remove
did you implement routing procedure correctly?
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'TodoCtrl'
})
.state('app.welcome', {
cache: false,
url: "/welcome",
views: {
'menuContent': {
templateUrl: 'index.html'
}
}
})
.state('app.search', {
cache: false,
url: "/search",
views: {
'menuContent': {
templateUrl: "templates/search.html",
controller: "SearchCtrl"
}
}
})
.state('app.searchActivity', {
url: "/searchActivity",
views: {
'menuContent': {
templateUrl: "templates/searchActivity.html",
controller: "SearchActivityCtrl"
}
}
})
.state('app.activitiesList', {
url: "/searchActivity/:searchText",
views: {
'menuContent': {
templateUrl: "templates/activitiesList.html",
controller: "activitiesListCtrl"
}
}
})
.state('app.map', {
cache: false,
url: "/map",
views: {
'menuContent': {
templateUrl: "templates/map.html",
controller: "mapCtrl"
}
}
})
.state('app.tabs', {
cache: false,
url: "/tabs",
views: {
'menuContent': {
templateUrl: "templates/tabs.html",
controller: "tabsCtrl"
}
}
})
.state('app.contactus', {
url: '/contactus',
views: {
'menuContent': {
templateUrl: 'templates/contactus.html'
}
}
})
.state('app.aboutus', {
url: '/aboutus',
views: {
'menuContent': {
templateUrl: 'templates/aboutus.html'
}
}
})
.state('app.SearchResult', {
url: '/search/:choice/:searchtext',
views: {
'menuContent': {
templateUrl: 'templates/searchresult.html',
controller: 'SearchResultCtrl'
}
}
})
.state('app.searchactivityresult', {
url: '/search/searchactivityresult',
views: {
'menuContent': {
templateUrl: 'templates/searchactivityresult.html',
controller: 'SearchActivityResultCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/welcome')
});
where is the detail item page in your routing config?
.state(‘app.SearchResult’, {
url: ‘/search/:choice/:searchtext’,
views: {
‘menuContent’: {
templateUrl: ‘templates/searchresult.html’,
controller: ‘SearchResultCtrl’
}
}
})
and also your side menu code… let me see it
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-nav-title>
<img src="img/logo.png" style="height: 40px; text-align:center" />
</ion-nav-title>
<ion-nav-buttons side="right">
<button class="button button-icon ion-android-more-vertical" ng-click="openPopover($event)"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent">
<!-- Here Contents will go on -->
</ion-nav-view>
<ion-footer-bar class="cust-footer">
<div class="row">
<div class="col" style="margin-top: -10px"><a href="#/app" menu-close style="color:white; text-decoration:none"><i class="fa fa-home fa-2x" onclick="home()"></i></a></div>
<div class="col col-75">© Ajman Chamber of Commerce</div>
</div>
</ion-footer-bar>
</ion-side-menu-content>
<ion-side-menu side="left" class="left-bar">
<div>
<ion-content>
<ion-list>
<ion-item class="left-bar">
<div class="logo-header">
<img src="img/main-logo.png" class="img-circle" />
</div>
</ion-item>
<ion-item menu-close class="left-bar">
<a href="#/app/welcome"><i class="fa fa-home"></i> Home</a>
</ion-item>
<!--<ion-item menu-close ng-click="login()">
Login
</ion-item>-->
<ion-item menu-close class="left-bar">
<a href="#/app/search"><i class="fa fa-map-o"></i> Search by Business Name</a>
</ion-item>
<ion-item menu-close class="left-bar">
<a href="#/app/searchActivity"><i class="fa fa-map-marker"></i> Search by Activity Name</a>
</ion-item>
<!--<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
<ion-item menu-close href="#/app/tabs">
Tabs
</ion-item>-->
</ion-list>
</ion-content>
</div>
</ion-side-menu>
angular.module(‘starter.controller’, [])
.controller(‘TodoCtrl’, function ($scope, $ionicPopup, $ionicListDelegate, $ionicSideMenuDelegate, $ionicPopover) {
$scope.toggleLefts = function () {
$ionicSideMenuDelegate.toggleLeft();
};it should be :
<ion-side-menu-content>
<ion-header-bar align-title="center" class="bar-assertive">
<div class="buttons">
<button class="button icon button-clear ion-navicon" ng-click="toggle()"></button>
</div>
<h2 class="title">Title</h2>
</ion-header-bar>doesn’t work 
I try it in some different ways might be it will work thank you very much thanks for you support.
i do think it is because of nav back button or history function… You can see that it is a menu icon but the truth is it the backhistory which is nav back button…