Passing a controller function between directives

Question

I have a set of two directives that call each other recursively to render a tree structure.

I need to pass a controller function reference to those directives so in turn, they need to pass each other that reference. It seems to work except for the parameters.

Passing the reference to the directive:

<item-list items="data" functionreference="controllerfunction(name)"></item-list>

Passing the reference between directives:

<item-list items="item.children" functionreference="functionreference(name)"></item-list></li>

Calling the function:

$scope.functionreference({name: name});

Here's a example (jsfiddle)

What would be the proper way to declare and pass the function reference?

What is `name` in `controllerfunction(name)` when used in view? — dmahapatro, Apr 14 '14 at 15:43
I got that from this question: http://stackoverflow.com/questions/15991137/calling-method-of-parent-controller-from-a-directive-in-angularjs. You're supposed to pass the function along with the name of the parameters. Then when you invoke the function, you have to use those names: $scope.functionreference({paramname: value}). It works in this question's example... but not in mine :-( — ddx001, Apr 14 '14 at 15:49

gkalpak · Accepted Answer · 2014-04-14T16:42:32.443

1

In your itemList template:

template: '<ul><item ng-repeat="item in items" item="item" functionreference="functionreference(name)'

you reference the function functionreference(name), but you can't call that (you should be calling functionreference({name:name}) instead.

So, changing your template to:

tempate: '<ul><item ng-repeat="item in items" item="item" functionreference="functionreference({name: name})'

it should work fine.

UPDATE:
The same holds for the appended <li> in the item directive:

<item-list items="item.children" functionreference="functionreference({name:name})"></item-list>
// Instead of: functionreference(name)

See, also, this updated demo.

edited Apr 14 '14 at 16:42

answered Apr 14 '14 at 16:01

gkalpak

47,844
8
105
118

Updated demo does not work for children when controller function is called. This update has to be done in two places. I should have edited your answer instead. :) @user280767 – dmahapatro Apr 14 '14 at 16:19
Indeed (but you get the point) :) I updated the answer and the demo (just in case someone runs into the same problem). – gkalpak Apr 14 '14 at 16:43

dmahapatro · Answer 2 · 2014-04-14T16:18:55.787

You have to make sure to use like this. Make sure the edit is done in two places as shown below.

Use functionreference="functionreference({name:name})" wherever you want to use the controller function inside directives.

myApp.directive('itemList', function ($compile) {
    return {
        restrict: 'E',
        template: '<ul><item ng-repeat="item in items" item="item" ' +  
                  'functionreference="functionreference({name:name})"> ' + 
                  '</item></ul>',
        scope: {
            items: '=',
            functionreference: '&'
        }
    };
});

and

$element.append('<li>{{item.name}} [   ' +
                '<a href="#" ng-click="directivefunction(item.name)">directivefunction</a> / ' + // DOES work
                '<a href="#" ng-click="functionreference({name:item.name})">functionreference</a>]' + // Does NOT work
                            '<item-list items="item.children" functionreference="functionreference({name:name})"></item-list></li>');

Passing a controller function between directives

2 Answers2