How to override navigation bar?

ionic-v1
#1

I don’t know how to add a save button to system defined default navigation bar? So i did following:

I have a system default navigation bar throughout the app. I have a settings view and inside settings (on the click of a button) i open a new view… profile udpate view. Settings view contains the default navigation bar. But I needed a save button inside profile update ion view so i turned default navigation bar off by hide-nav-bar="true" and created a custom navigation bar and put 2 buttons ‘save’ on the right and ‘back’ on the left.

<div class="bar bar-header-custom">
  <button ng-click="GoBack()" class="button back-button buttons  button-clear header-item">
  	<i class="icon ion-ios-arrow-back"></i><span>Back</span>
  </button>
  <div class="h1 title">Personal Details</div>
  <button class="button button-clear button-positive"><span>Save</span></button>
</div>

I created a function called GoBack in my profile controller and used it to go back to settings when i click Back button above. The problem is that when i do that, although the view successfully transitions, the settings view starts showing a back button too. Probably system navigation doesn’t make peace with this manual custom transition and so behaves erratically. How do i make it work? I want that when i click on back button on my profile update page the settings page open with the original system defined navigation bar intact.

Or, this whole problem could go away if I knew how to add a save button to system navigation bar?

Help me please.
Thanks.

#2

You can easily replace buttons on a single page by adding <ion-nav-buttons> to your <ion-view>, like this (see check-in.html):

Is this what you were looking for?

Note: This replaces the previously declared buttons, e.g. “Home” in this case.

#3

@bodinaren this is the save button in sub menu where you do have ion-nav-bar but on my settings page there’s no such bar. it’s system defined default navigation bar. my view has just ion-view. Like below:
<ion-view> <ion-content></ion-content> </ion-view>

#4

found a really simple solution to the problem.
http://ionicframework.com/docs/api/directive/ionNavButtons/
Just added following code to add the button on the right side of the view:

<ion-nav-buttons side="secondary"> <button class="button button-clear" ng-click="save()"> Save </button> </ion-nav-buttons>

2 Likes
#5

You can easily replace buttons on a single page by adding to your , like this (see check-in.html):

in this side=“left” didn’t work. but side=“secondary” worked for me.

1 Like
#6

how to set manual back button instead of putting navigation bar in index.html?