Understanding the Nav Bar

1

I am trying to make my app have header nav bar buttons based on the page you are on, but I’m not sure how to go about this.

Here is an example that works.

<ion-nav-bar class="nav-title-slide-ios7">
	<ion-nav-buttons side="left">
		<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
	</ion-nav-buttons>
	<ion-nav-buttons side="right">
		<a class="button button-icon icon ion-ios7-plus-empty" href="#/app/book"></a>
	</ion-nav-buttons>
</ion-nav-bar>
<ion-view title="Title">
  //content
</ion-view>

But when I just want a back button like in this example, the back button doesn’t show up.

<ion-nav-bar class="nav-title-slide-ios7">
	<ion-nav-back-button class="button button-icon icon ion-ios7-arrow-left">Back</ion-nav-back-button>
</ion-nav-bar>
2

The <ion-nav-bar allows control of navigation states witin the app. Mainly, it’s for showing a title and back button.

The <ion-nav-button>s belong in the view.

See this sample :

3

That’s strange. For some reason when I do it that way the header nav is just blank. But I found a workaround that works for me.

4

isn’t it kind of odd that the “nav” buttons would be in the “view” and not the “bar”? Structurally, this seems flawed, since the buttons are actually displayed in the bar itself and not the view.

Assuming this is done this way for $scope reasons?

5

actually i stand corrected. These are disconnected.

The <ion-nav-back-button> goes in the <ion-nav-bar>, whereas <ion-nav-buttons> goes in <ion-view>. Does this mean <ion-nav-buttons> have to go in every partial? How is menu-toggle handled? (http://ionicframework.com/docs/api/directive/menuToggle/)

This is extremely confusing, particularly when it comes to the markup.

6

Can you share the workaround please