Issues with the back button implementation


#1

Hello all.

I am using the beta version of Ionic and am having issues implementing the Back button in the navbar.

I have the following code for the back button in my navigation html file from where I set the routes for each entry in the side menu.

This back button is visible on all subsequent pages, where I do not want it to appear.

<ion-nav-bar class="bar-assertive">
			<ion-nav-back-button class="button-clear">
				<i class="icon ion-chevron-left"></i>
			</ion-nav-back-button>
		</ion-nav-bar>

I have attached a screen shot to my issue. I want to disable the back button here.

I have been struggling with this issue the entire day and looked into the forum for previous posts, but none have helped! Any helpis greatly appreciated.

Regards.
Shreerang
Spatial Unlimited


#2

Stand by. Working on a sample for you.


#3

See this sample. http://codepen.io/calendee/pen/eLgjb?editors=101

  • There are two ways to hide the back button - with hide-back-button="true" in the <ion-view> : Page 2 shows this.
  • Using $ionicNavBarDelegate : Page 3 shows this. Note the timeout is required or when the view renders, the backbutton gets put on again.

#4

@Calendee thanks for the snippet. I was trying using $ionicNavBarDelegate and was missing the timeout. Thanks a lot for your input.

Regards.
Shreerang
Spatial Unlimited


#5

Hello @Calendee.

This implementation is not working when using the side menu implementation. If you click on a menu item in the side menu and have hide-back-button="false" in the <ion-view>, the back button doesn’t show up. I was looking into the ionic starter sideMenu app.

Regards.
Shreerang
Spatial Unlimited


#6

Got around this…The back button was not visible as there was nav-clear on the href of each menu item.

Regards.
Shreerang
Spatial Unlimited