Angular directive scope parameter function, pass a function to it

Question

I have a directive defined that contains a function binding:

angular .module('my.module') .directive("myDirective", [ function () { return { controller: 'MyDirectiveController', templateUrl: 'controls/myDirective/myDirective.html', replace: true, restrict: 'E', scope: { openFunction: '&' } }; }]);

in my source html, I'm defining the directive like so:

<my-directive open-function="openDrawer(open)" </my-directive>

Then, in my directive controller, I'm calling it like this:

$scope.openFunction({ open: function() { doSomething() .then(function () {...}) .finally(function () {...}); } });

And here's the parent controller openDrawer function:

$scope.openDrawer = function (open) { $scope.alerts = null; $scope.showActions = false; if (service.editing) { service.closeAndSave(); openDrawerAfterDelay(open); } else if (otherService.editing) { otherService.commit(); openDrawerAfterDelay(open); } else { open(); } };

The problem is, when my directive controller calls the $scope.openFunction() function, nothing happens. Am I able to pass a function, to the bound function like this?

Devin H. · Accepted Answer · 2015-08-03 15:20:27Z

2

This appears to be something unrelated. I've reproduced the code in plunker here: http://plnkr.co/edit/SuzCGw5WVRClEwEcA17l?p=preview

Possible leads that I can see without seeing the entire code are:

I'm mocking the service and otherService, so the if conditions are always false - the problem may lie in the calls within the if blocks.
I'm unsure of what the doSomething promise is doing, this may be a cause.

edited Aug 3, 2015 at 15:20

answered Aug 3, 2015 at 14:59

Devin H.

1,1051 gold badge11 silver badges20 bronze badges

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

5 Comments

ganders Over a year ago

I thought in order to pass variables to functions that are bound in the directive, you had to encapsulate the variable as an object (the {parameterName: parameter} part)? I have another directive that has a function bound, and it did NOT work the way you mentioned above. It only started working once I put the curly braces, and parameter name in the function call.

ganders Over a year ago

Here's an example of what I'm talking about with the curly braces/object in the function call: stackoverflow.com/questions/18305247/…

Devin H. Over a year ago

I may have been too quick on the draw here. I've reproduced your code in plunker here: plnkr.co/edit/SuzCGw5WVRClEwEcA17l?p=preview The console.log is being executed. Looks like this may be an issue with something unrelated? One thing to note - your my-directive opening tag is missing the closing >. Not sure if this is typo in question, or code?

ganders Over a year ago

Can you go ahead and update your answer so people don't think that it should be written without the curly braces? Then I'll give you your points. Thanks for the help!

Devin H. Over a year ago

Done. I hope you find the root cause!

Collectives™ on Stack Overflow

Angular directive scope parameter function, pass a function to it

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related