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
– dmahapatro, Commented Apr 14, 2014 at 15:43
I got that from this question: stackoverflow.com/questions/15991137/…. 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
– ddx001, Commented Apr 14, 2014 at 15:49

gkalpak · Accepted Answer · 2014-04-14 16:42:32Z

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, 2014 at 16:42

answered Apr 14, 2014 at 16:01

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

2 Comments

dmahapatro Over a year ago

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

gkalpak Over a year ago

Indeed (but you get the point) :) I updated the answer and the demo (just in case someone runs into the same problem).

dmahapatro · Accepted Answer · 2014-04-14 16:18:55Z

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>');

Collectives™ on Stack Overflow

Passing a controller function between directives

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related