Angular JS: Passing a function into a directive template not working

Question

I'm new to AngularJS. I am writing a directive that takes in a function name (because this will change occasionally) and then I set it as the ng-click function in the template to call the function on the controller. However, it does not seem to be firing, I am sure I am doing something completely wrong so any help would be great!

I would like the fire-fn="callThis($index)" in my directive, to call the $scope.callThis on MyCtrl by getting injected into the template's html markup.

Code is here: http://plnkr.co/edit/epMfDwZILgJ5W9qIIPgr?p=preview

Thanks for the help!

Jmr · Accepted Answer · 2013-05-01 01:38:28Z

10

You need to remove the '$parent' stuff that's happening in the link function, and within the directive call it with ng-click="fireFn()" instead of using {{}} there.

Check out a working version (with indices!) at http://plnkr.co/edit/VJNOyx0sBRo0QrcJLsOB?p=preview

The way '&' passes attributes is odd, from the Angular docs:

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}).

edited May 1, 2013 at 1:38

answered May 1, 2013 at 1:17

Jmr

12.1k4 gold badges41 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

Angular JS: Passing a function into a directive template not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related