AngularJS ng-click: how to call a function with a function as parameter?

Question

I want to code a confirmation-box-function (opens a modal), called within a ng-click directive.

Inside this confirmation-modal i have two buttons: Cancel + Ok. A click on Cancel dismisses the modal. A click on Ok has to call the (callback)-function given through my ng-click-call (with parameters):

<button ng-click="confirmBox('beSureQuestion', functionToCallWhenOkClicked(parameter))">Delete</button>

Is there a way to give a function as parameter inside the ng-click?

I dont want to use if-statements inside my html-template.

Any suggestions?

You can easily do it by javascript ryt? Did you tried it by using javascript function? — Nikz
– Nikz, Commented Dec 5, 2014 at 9:56

dfsq · Accepted Answer · 2014-12-05 10:18:17Z

3

No, you can do it the way you are trying to do. The problem is that ngClick will execute two functions functionToCallWhenOkClicked(parameter) and confirmBox at the same time because you invoke them immediately with ().

What you can do however is to pass a function reference like this:

<button ng-click="confirmBox('beSureQuestion', functionToCallWhenOkClicked)">Delete</button>

and them call it from controller when needed:

$scope.confirmBox = function(msg, okCallback) {
    // some checks ...
    okCallback();
}

UPD. From the comment by @Marcel Ennix. To be able to pass additional parameters it's optimal to pass one more argument to confirmBox function:

ng-click="confirmBox('beSureQuestion', functionToCallWhenOkClicked, {para1:value1, para2, value2})"

edited Dec 5, 2014 at 10:18

answered Dec 5, 2014 at 10:03

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

3 Comments

Marcel Ennix Over a year ago

Yes, thats the way. Thank you! Let me add this important feature: to call my callbackFunction with paramaters i added a third parameter "para", in JSON-format: ng-click="confirmBox('beSureQuestion', functionToCallWhenOkClicked, {para1:value1, para2, value2})". Maybe you edit your answer with that?

dfsq Over a year ago

Yes, this is good addition. In general it's a good idea to use object to pass many parameters and data. It can even be confirmBox({message: 'beSureQuestion', callback: functionToCallWhenOkClicked, params: {}}).

Marcel Ennix Over a year ago

Oh, there is a typo in the extra-parameter: para2,value2 has to be para2:value2 (no commata) - @dfsq please edit

Leopoldo Sanczyk · Accepted Answer · 2016-01-27 20:46:27Z

1

As JavaScript is a functional programming language there are actually no differences between variables and functions. A variable is just a simple function returning its value. So to use functions as parameters simply pass the function to the view by adding it to $scope in your angular controller:

$scope.myCallback = function(anyParameter) {
    //do some stuff
    return "some stuff" + anyParameter;
}

$scope.anyFunction = function(value,callback,parameter) {
    //do something with value
    ...
    //do the callback
    callback(parameter);
}

now you can pass this callback function on within your template:

<div ng-click="anyFunction(someValue, myCallback, someParameter)">

edited Jan 27, 2016 at 20:46

Leopoldo Sanczyk

1,6191 gold badge27 silver badges28 bronze badges

answered Dec 5, 2014 at 10:07

Daniel

3,5243 gold badges36 silver badges48 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-click: how to call a function with a function as parameter?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related