Can an angular directive pass arguments to functions in expressions specified in the directive's attributes? Can an angular directive pass arguments to functions in expressions specified in the directive's attributes? javascript javascript

Can an angular directive pass arguments to functions in expressions specified in the directive's attributes?


If you declare your callback as mentioned by @lex82 like

callback = "callback(item.id, arg2)"

You can call the callback method in the directive scope with object map and it would do the binding correctly. Like

scope.callback({arg2:"some value"});

without requiring for $parse. See my fiddle(console log) http://jsfiddle.net/k7czc/2/

Update: There is a small example of this in the documentation:

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localFn:'&myAttr' }, then isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression and to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).


Nothing wrong with the other answers, but I use the following technique when passing functions in a directive attribute.

Leave off the parenthesis when including the directive in your html:

<my-directive callback="someFunction" />

Then "unwrap" the function in your directive's link or controller. here is an example:

app.directive("myDirective", function() {    return {        restrict: "E",        scope: {            callback: "&"                                      },        template: "<div ng-click='callback(data)'></div>", // call function this way...        link: function(scope, element, attrs) {            // unwrap the function            scope.callback = scope.callback();             scope.data = "data from somewhere";            element.bind("click",function() {                scope.$apply(function() {                    callback(data);                        // ...or this way                });            });        }    }}]);    

The "unwrapping" step allows the function to be called using a more natural syntax. It also ensures that the directive works properly even when nested within other directives that may pass the function. If you did not do the unwrapping, then if you have a scenario like this:

<outer-directive callback="someFunction" >    <middle-directive callback="callback" >        <inner-directive callback="callback" />    </middle-directive></outer-directive>

Then you would end up with something like this in your inner-directive:

callback()()()(data); 

Which would fail in other nesting scenarios.

I adapted this technique from an excellent article by Dan Wahlin at http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters

I added the unwrapping step to make calling the function more natural and to solve for the nesting issue which I had encountered in a project.


In directive (myDirective):

...directive.scope = {      boundFunction: '&',    model: '=',};...return directive;

In directive template:

<div data-ng-repeat="item in model"  data-ng-click='boundFunction({param: item})'>{{item.myValue}}</div>

In source:

<my-directive model='myData' bound-function='myFunction(param)'></my-directive>

...where myFunction is defined in the controller.

Note that param in the directive template binds neatly to param in the source, and is set to item.


To call from within the link property of a directive ("inside" of it), use a very similar approach:

...directive.link = function(isolatedScope) {    isolatedScope.boundFunction({param: "foo"});};...return directive;