Add button to right side of nav-bar


#1

I’m trying to add a button to the right side of my nav-bar, as I want to maintain header sliding, but I can’t seem to get it to work. After some searching, I discovered the right-buttons attribute and learned that I can pass the class via my controller. The edit button successfully adds, but it attaches the back button to it and throws it to the right-hand side, while also taking off the back click’s functionality.

My nav-bar (in index.html):

<nav-bar type="bar-positive" animation="nav-title-slide-ios7" back-button-type="button-icon" back-button-icon="ion-ios7-arrow-back">
</nav-bar>

In my controller:

$scope.rightButtons = [{ 
    type: 'button-clear',
    content: 'Edit',
    tap: function(e) {}
}];

My template file:

<view title="Page Title'" right-buttons="rightButtons">
  <content has-header="true" has-tabs="true">
  </content>
</view>

Thanks!


#2

I’m not exactly sure what the issue is. However, something you said rings a bell. “but it attaches the back button to it and throws it to the right-hand side”.

Version 0.9.23 seemed to have bugs with the back buttons appearing on the right hand side. You might want to try the newly release 0.9.24 or nightlies. If that doesn’t help. can you make a Plunker or Codepen demo of the problem?


#3

Updating did the trick. Thanks!