How to integrate custom buttons (side menu, etc) in nav-bar

ionic-v1
1

I was wondering how to integrate custom buttons (side menu, etc) in the nav-bar used for the Nav Router Controller.

I really like the Nav Router because it auto updates the title. But when using a regular header I haven’t found a solution so far of displaying a dynamic title based on different controllers outside the logic of the Nav Router.

So what has to be done to have the nav-bar used for the Nav Router display a back button left and side menu button right.

Also, I think the documentation of the Nav Router Controller nav-bar http://ionicframework.com/docs/angularjs/controllers/nav-router/ should explain a little bit more about the properties that can be used on the nav-bar element.

1 Like
2

I did a test with the header-bar element and was able to modify headerTitle attribute from within different controllers by accessing the property from the $rootScope present in AngularJS. (Now I’m not dependable of the nav-bar element and I can keep my logic.)

$rootScope.headerTitle = 'My Title';

To do so, I added $rootScope as a param to my controller function.

controller('MyCtrl', function($scope, $rootScope) {
    $rootScope.headerTitle = 'My Modified Title';
}

This way it’s also possible to access other properties such as leftButtons, rightButtons and modify them per controller basis.
The downside is that when you’ve set a property in controller X and you move to controller Y you’ll have to set the property to null if you don’t want to show it (does not happen in all cases, not sure why this happens).

Now, to add the button for the side menu (right) I wrote this:

  $rootScope.rightButtons = [
    { 
      text: 'Open side navigation',
      type: 'button-positive',
      content: '<i class="icon ion-navicon"></i>',
      click: function(e) {
        $scope.sideMenuController.toggleRight();
      }
    }
  ];

I’m not sure $rootScope is the good way to go. But it seems to work and runs stable.

2 Likes
3

Hey @MrJean, you can also use <header-bar> and just supply the values yourself:

<header-bar right-buttons="myRightButtons" title="myTitle"></header-bar>.

Then the myRightButtons and myTitle can be supplied from the scope in your controller.

<header-bar> is a subset of the <nav-bar> (which we only use for the nav router).

Does that help?

4

But is posible to just add a right o left button to the nav-bar element?

5

This only works for me if it is the root view, otherwise I loose my back button. Any suggestions?

6

@daver182 - yes, it’s possible. See the Header docs which were just updated, or @MrJean’s answer above: http://ionicframework.com/docs/angularjs/views/header/

@samsinite - are you trying to use multiple nav-bars in your app? Right now we only support one, though this question was brought up yesterday and we aren’t sure what we should do in this situation.

7

@max - No, just one nav bar in my index.html. Here is where I tried putting the header bar, any ideas?

<header-bar type="bar-positive" title="drink.title" right-buttons="rightButtons"></header-bar>

<nav-page title="drink.title" right-buttons="rightButtons">
	<content has-header="true">
		<list>
...

Thanks for the feedback :slight_smile:

8

@max, MrJean solution doesnt work for me, I can use header-bar and I see the buttons but I have to change the title in every controller and I loose the transition effect, if I use nav-bar the buttons doesnt appear at all, why nav-bar is not documented?

9

It is correct that you loose the transition effect. But it’s possible to add it to your main container (pane element, etc) by assigning the associated classes.

But you’re right the documentation should be expanded in order to be clear for the users of Ionic.
Anyway, I think it’s good that we are currently experimenting with possible solutions for a problem. This can only improve the framework over time.

10

I’ll try the header-bar when I find some spare time and see how that works out :slight_smile:

Would it be possible to share some documentation about the possible transitions and how to manually apply them? Just by using CSS or also using the animation attribute?

I think this will be helpful for allot of users.

11

@daver182 and @MrJean, you are both right we need to document this better. Let me see about getting something better up on the docs this week and get back to you guys on this.

3 Likes
12

Ok, so I used this already:

   <header-bar
        title="headerTitle"
        left-buttons="leftButtons"
        right-buttons="rightButtons"
        type="bar-energized"
        align-title="center">
   </header-bar>

Does that mean that by providing another name you override the default binding?
So, what I mean is that header-bar normally listens to $scope.title, where after assigning a new value it looks for $scope.headerTitle?

Or am I missing something?