How can I make an angularjs button click call a passed-in function?

Question

I'm trying to make an application that has some data-driven UI. So, I'm trying to pass in a function that should be called when a button is clicked. The second button works, of course, as it explicitly calls the function. However, the first one doesn't. Here's the angular js code:

$scope.clickFunction = "clickedIt()";
$scope.clickedIt = function(){
    alert("It worked!");}

And the html:

<p>How can I make this button call a passed-in function?</p>
<button ng-click="{{clickFunction}}">Click Me</button>
<p>I'd like it to evaluate to this, which works.</p>
<button ng-click="clickedIt()">Click Me</button>

Here's a plunker with the code I'm try to make work. http://plnkr.co/edit/aRBX3bbgHCV15mgROZx1?p=preview

dfsq · Accepted Answer · 2016-04-21 21:58:40Z

1

You need to define a function name in controller you want to use as event handler:

$scope.clickFunction = "clickedIt";

then in template use bracket notation:

<button ng-click="this[clickFunction]()">Click Me</button>

The idea is that this points to current scope object, exactly what you want, and that's why bracket notation is useful here.

Demo: http://plnkr.co/edit/TmdGuCpnbYz3gaWDi9tB?p=preview

answered Apr 21, 2016 at 21:58

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wandercoder Over a year ago

I've never seen bracket notation before. Time to hit the angularjs documentation again. Thanks!

dfsq Over a year ago

You will not find it in Angular documentation though. You just need to understand that angular expression is basically parsed and evaluated, as javascript. And javascript has this feature: you can access object property with bracket notation: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

How can I make an angularjs button click call a passed-in function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related