CODEWITHSUNDEEP
angularjs
ddx001
ddx001

Reputation: 2763

Passing a controller function between directives

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?

Upvotes: 0

Views: 63

Answers (2)

gkalpak
gkalpak

Reputation: 48211

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.

Upvotes: 1

dmahapatro
dmahapatro

Reputation: 50245

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

Upvotes: 1

Related Questions