Can you pass an angular expression as the actual ng-click function

Question

I am just asking this as I cant find it anywhere.

I have an angular object column.addOnParams

This object containes a child element of rowClick, so it would be column.addOnParams.rowClick

In this child element contains the word myclickevent();

Is it possible to pass this to a ng-click.

So it would be as follows.

<td ng-repeat="column in columns" class="" ng-click="column.addOnParams.rowClick"></td>

I have tried it in the way above, but nothing gets generated, it just shows it as it is, after page load.

I also tried the following,

<td ng-repeat="column in columns" class="" ng-click="{{column.addOnParams.rowClick}}"></td>

That throws a reference error in angular,

Syntax Error: Token 'column.addOnParams.rowClick' is unexpected, expecting [:] at column 3 of the expression [{{column.addOnParams.rowClick}}] starting at [column.addOnParams.rowClick}}].

Any advice from you guys?

Side note when using this for the class object it works.

<td ng-repeat="column in columns" class="{{column.addOnParams.cssClass}}"></td>

The above statement generates and works perfectly.

Thanks to @J-D comment, the plunker solution worked like a charm Working solution

Using the this keyword was what I needed.

Answer 1

You can use $eval to call myclickevent().

Example given below:

In your controller

$scope.myclickevent = function(rowClick) {
   //your functionality here.
}

and suppose you have myclickevent() string in column.addOnParams.rowClick

Then In your html template

<td ng-repeat="column in columns" class="" ng-click="$eval(column.addOnParams.rowClick)"></td>

Hope it would help you.

Answer 2

<td ng-repeat="column in columns" class="" ng-click="{{column.addOnParams.rowClick}}"></td>

Above code will not work. ng-click is used for calling function when user click on it. You can pass parameter to function. So you updated code will look like:

<td ng-repeat="column in columns" class="" ng-click="myClickFunction(column.addOnParams.rowClick)></td>

And in your controller, myClickFunction bind to scope.

$scope.myClickFunction = function(rowClick) {
   //do whatever you want to do
}

Based on your code remove {{}} then it will work fine:

<td ng-repeat="column in columns" class="" ng-click="column.addOnParams.rowClick"></td>