How to add buttons to ion-nav-bar dynamically?

ionic-v1
1

I can’t find it in the documentation, so I’m asking here.

How do I add buttons dynamically to the ion-nav-bar directive?

It was possible somehow in the past if I remember correctly. However, I can’t find anything for this in the documentation.

3 Likes
2

The only clear way I’ve found to change the buttons in the ion-nav-bar
is the ion-nav-buttons directive that you can place in your templates.

http://ionicframework.com/docs/api/directive/ionNavButtons/

1 Like
3

@mikeyg6754 is correct. You could use a mixture of ng-repeat and the ion-nab-buttons

<ion-nav-buttons side="left" ng-repeat="button in buttons">
      <button class="button" ng-click="doSomething()">
        I'm a button on the left of the navbar!
      </button>
    </ion-nav-buttons>
1 Like
4

For what its worth, I use the same nav buttons in many places (left side has side menu button, right side has search button). So I put those into a template and include them anywhere I need them with ng-include to avoid duplication.

Put in header
<ng-include src="'common/button-menu-right.html'"></ng-include>

ng-template example
<script type="text/ng-template" id="common/button-menu-left.html"> <ion-nav-buttons side="left"> <button ng-click="openLeftMenu()" class="button button-clear button-icon icon ion-navicon"></button> </ion-nav-buttons> </script>

2 Likes
5

I got different buttons for almost each tab. So this is not really what I’m looking for.

It was possible in an older ionic version to say left-buttons="leftButtons" and
in the $scope.leftButtons you’ve set the buttons dynamically.

why was this removed? This is exactly what I am looking for.

6

Its now available through a directive (much better approach) to add buttons to the header-bar. http://ionicframework.com/docs/api/directive/ionNavButtons/ This approach means you are more declarative in your markup and lets you have more control over content in the buttons. Those aren’t related to tabs though, its to do with navigation.

7

Ahhhh! Now I got it. Thanks for that!
Much better approach indeed :slight_smile:

8

Sorry if the following question is too obvious, but I’m pretty new to Ionic.
I have a similar problem (I want to add a button to ion-nav-bar dynamically as well), but my app is based on the “sidemenu” example and I want the new button to be visible only in one of the view states (defined with the $stateProvider).
Considering the ion-nav-bar is located in a different template (the “menu” template), which is controlled by a parent controller, and the other view (which I want to show the button in the navbar) has its own controller, ¿how can I make it work?. Also I don’t want to duplicate the menu template for only a button.

I’ve tried to control the visibility of the button with ng-if, but I have to set the condition (and the click handler function) on the $rootScope which I know is a bad idea, specially because once the “other view” adds the button (sets the condition to true), there’s no way to hide it other than changing the rest of the controllers to set the condition to false.

Thanks in advance.

9

You can use the $root property of your current $scope.

In your template:

<button class="button" ng-click="doSomething()" ng-if="$root.showExtraButton">
	I'm a button on the left of the navbar!
</button>

In your controller that needs the button:

.controller("MyController", function($scope) {
  $scope.$root.showExtraButton = true;

 $scope.$on("$stateChangeStart", function() {
   $scope.$root.showExtraButton = false;
 })
}

Here’s an example of doing this for a sidemenu : http://codepen.io/calendee/pen/mjtJL

2 Likes
10

Thanks!. I’ve applied your idea (using the $parent scope instead of the $root), but the transition to remove the button isn’t too good.

Here’s an example of what I mean: http://codepen.io/anon/pen/hDIsb

You’ll see that the “+” button is still visible while changing from the “Add button” menu option to any of the other two. The button only disappears when the slide menu animation ends though the menuContent of the new view i already set. Any idea about how to improve that?. Maybe using nested menu states to control the buttons?.

11

I changed it back to $root and then put an ng-click on each menu item to hide the button. I don’t know if it is any faster or not.

Seems smooth enough for me both ways. I THINK the issue is that buttons on the nav-bar have an hide and show animation that is delayed. You’ll have to dig through and find some way to avoid that animation.

12

Thanks again, I’ll look into it.

13

I found that replacing the button’s ng-if with a ng-show avoids the transition issue.
Thanks!.

1 Like
14

Currently in version ionic-nightly1154 this example is not working. Any alternative?

15

just came to that issue, I solved it with dynamic content instead dynamic wrapper.

instead of

<ion-nav-buttons ng-if="expression" side="primary">
  <button>Click me</button>
</ion-nav-buttons>

do

<ion-nav-buttons side="primary">
  <button ng-if="expression">Click me</button>
</ion-nav-buttons>

hope, it helps someone

16

Take a look at Navigation doc: http://ionicframework.com/docs/api/directive/ionNavView/ and look for ion-nav-buttons. There you will find an easy way to add and organize buttons on the ion-nav-bar.