Angular: calling controller function inside a directive link function using &

Question

We're running into a problem trying to call a function passed into a directive using the ampersand '&' in our directive's link function.

It seems the function is called on the controller but no arguments are passed in the call. All the examples we have seen involve passing through by creating a call in template. Is there a way to call a function on your directive from its template, then do something in the directive that calls the controller function passed into it?

You can see this example stackoverflow.com/questions/16881478/… — vmontanheiro
– vmontanheiro, Commented Nov 7, 2014 at 16:34

Mark Rajcok · Accepted Answer · 2013-05-30 15:15:20Z

159

Are you passing the arguments inside {}s? E.g., inside the directive's link function, you'll want to call the method like so: scope.someCtrlFn({arg1: someValue});

<div my-directive callback-fn="ctrlFn(arg1)"></div>

app.directive('myDirective', function() {
    return {
        scope: { someCtrlFn: '&callbackFn' },
        link: function(scope, element, attrs) {
            scope.someCtrlFn({arg1: 22});
        },
    }
});

function MyCtrl($scope) {
    $scope.ctrlFn = function(test) {
        console.log(test);
    }
}

Fiddle.

answered May 30, 2013 at 15:15

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

6 Comments

Walt Over a year ago

Thanks! We just figured that out... didn't realize the key on the object had to match the argument function call that is passed in.

user1313891 Over a year ago

thank you soooo much, was struggling with this. Know how to pass the object map on an ng-click but this is awesome.

Vinicius.Silva Over a year ago

scope.someCtrlFn({arg1: 22}); is that i looking for! Thank you a lot!!

Ashit Vora Over a year ago

what happens if argument passed in directive is an object property. Eg. <div my-directive callback-fn="ctrlFn(x.y.z, arg2)" />

James-Jesse Drinkard Over a year ago

I finally found this syntax in the Angularjs docs. I think it was unintentionally well hidden. Thanks for posting this Mark!

|

robro · Accepted Answer · 2013-10-24 13:34:34Z

In addition to Mark's answer I'd like to point out that you can spare some letters using the & shorthand. This will assume that the callback-fn referenced in your HTML exists as scope.callbackFn in your scope. Everthing else is still the same, so there are only 2 lines to change. I kept Mark's version as comments, so you should be able to spot the difference easily.

<div my-directive callback-fn="ctrlFn(arg1)"></div>

app.directive('myDirective', function() {
    return {
        scope: { callbackFn: '&' }, //scope: { someCtrlFn: '&callbackFn' },
        link: function(scope, element, attrs) {
            scope.callbackFn({arg1: 22}); //scope.someCtrlFn({arg1: 22});
        },
    }
});

function MyCtrl($scope) {
    $scope.ctrlFn = function(test) {
        console.log(test);
    }
}

Collectives™ on Stack Overflow

Angular: calling controller function inside a directive link function using &

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related