Buttons angular expressions

tutorials
1

From : http://ionicframework.com/docs/angularjs/views/header/

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

Where headerTitle,  leftButtons , and  rightButtons  are angular expressions.

How to define leftButtons and rightButtons angular expressions (type, style, class, …).

Can you give us an example ?

Thank you.

2

Sure. What you want to do is make sure you have a controller above this header bar, like this:

<div ng-controller="MyCtrl">

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

</div>

Then in your controller:

angular.module('mymodule', ['ionic'])

.controller('MyCtrl', function($scope) {
        $scope.leftButtons = [
          { 
            text: 'Hello',
            click: function(e) {
              console.log('Click button');
            }
          }
        ]
});

Sorry, formatting is a little messed up, but does that help?

1 Like
3

Hi @max Thank you for response.
But what about other proprieties like icon and button-xx class ?

<button class="button button-positive">
  <i class="icon ion-star"></i> Favorites
</button>
4

You can set the class and html by adding ‘type’ and ‘content’ rules:

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

Hope this helps!

1 Like
5

Thank you @MrJean.
Works perfectly. @max It is imperative to put this in the documentation. Can help alot of people.

1 Like
6

Thanks, i was searching for this.

7

Hey, I’m having a bug with the header-bar directive. The title is duplicated. Attached is a link to the screen shot.

Link to screen shot

Here’s the code I’m using.

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

And for the controller

$scope.headerTitle = "Test";

$scope.leftButtons = [
  { 
    type: 'button-clear',
    content: '<i class="icon ion-ios7-search"></i>',
    tap: function(e) {
    }
  }
];

$scope.rightButtons = [
  { 
    type: 'button-clear',
    content: '<i class="icon ion-ios7-plus-outline"></i>',
    tap: function(e) {
    }
  }
];
8

You know, someone else reported this and I couldn’t duplicate it.

See this plunker which works for me: http://plnkr.co/edit/t3O6bvdeH0ewTnPqArO4?p=preview

Is there something else you have that might be causing it?

9

I think I have some information that might be helpful in tracking this bug down. I had something very similar happen to me while using v0.9.14. Things seem to work better with v0.9.15 but not perfectly.

The original poster of the bug mentioned that the title is duplicated. My title wasn’t duplicated but the buttons were. For example, if I defined my button to be:

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

The button would appear twice as “FooFoo”. Also clicking on the button would trigger the alert twice as well. This bug never appeared when I viewed my app through a browser. The bug only manifested itself when I viewed my app through the Xcode iPhone simulator or on my iPhone 5 (I’m using Cordova).

After switching to v0.9.15, the button no longer says “FooFoo” but the alert is still triggered twice which seems to indicate there might still be a bug here.

I’ve packaged up my test case as a git repo: https://github.com/alberthsu5/ionic-bug

I can also package up my v0.9.14 version as well if you want to see the “FooFoo” bug. Please let me know. Hopefully this is helpful!

10

I’m looking into this right now. I think it’s an issue with ngAnimate.

11

I just pushed some fixes that hopefully fix some of these issues, I’d love to know if they solved it for ya.

1 Like