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-03T15:20:27.923

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 03 '15 at 15:20

answered Aug 03 '15 at 14:59

Devin H.

1,065
1
11
19

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 Aug 03 '15 at 15:01
Here's an example of what I'm talking about with the curly braces/object in the function call: http://stackoverflow.com/questions/18305247/executing-a-scope-bound-function-with-parameters – ganders Aug 03 '15 at 15:09
1

I may have been too quick on the draw here. I've reproduced your code in plunker here: http://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? – Devin H. Aug 03 '15 at 15:12
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! – ganders Aug 03 '15 at 15:18
Done. I hope you find the root cause! – Devin H. Aug 03 '15 at 15:23

Angular directive scope parameter function, pass a function to it

1 Answers1