AngularJS: how to call a controller function (with arguments) inside a directive?

Question

The thing I already know: call a controller function without arguments inside a directive. The code is as below.

First in the directive definition:

scope: {
    actionFunc: "&"
}

In the directive template:

<button ng-click='actionFunc()'></button>

Then in controller's HTML view

<my-directive action-func='controllFunction()'>

Then in controller

$scope.controllFunction= function() { 
    alert("controllFunction is called");
};

The code above works well.

However, I want to pass arguments to the actionFunc. The controller should look like this:

$scope.controllFunction= function(arg1, arg2) { 
    alert(arg1);
    alert(arg2); 
};

How to write the HTML view and directive?

I'm not following completely. Is the controllFunction inside the directive's Controller? Or is it inside the controller behind the view that contains the directive? — JeffryHouser
– JeffryHouser, Commented Apr 3, 2014 at 3:07

link64 · Accepted Answer · 2014-04-03 04:20:07Z

1

You need to pass the arguments in an object from within the controller with their names.

In your example, you should do the following:

HTML View

<my-directive action-func='controllFunction(myArg1,myArg2)'>

Directive template

<button ng-click='actionFunc({myArg1: value1, myArg2: value2})'></button>

Replace value1 and value2 with the appropriate variable

answered Apr 3, 2014 at 4:20

link64

1,9661 gold badge26 silver badges43 bronze badges

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

1 Answer 1