Using bound function in AngularJS directive in the link function

Question

I'm writing a directive and it looks like this :

return {
    restrict: 'E',
    replace: false,
    scope: {
        getl: '&'
    },
    template: function()
    {
        return '<div data-ng-click="load_page(1)"></div>';
    },
    link: function(scope)
    {
        scope.current_page = 1;

        scope.load_page = function(increment)
        {
            scope.current_page += increment;

            scope.getl(scope.current_page);
        }
    }
};

I'm calling this directive like this:

<pager list="events" max="max_page" getl="get_events()"></pager>

What I'd like to do is being able to call the "getl" function from the "link" function of my directive but when I do so, I get the following error:

TypeError: Cannot use 'in' operator to search for 'f_get_events' in 2

I guess I'm missing something here but the only examples I found on Google were using the function in the template and I'd rather not to do like this.

Thanks for your help

James Henry · Accepted Answer · 2015-10-12 21:13:44Z

1

There are a few things going on here:

Your template is a broken string because you are using a single quote after load_page and no closing single string after the closing div:

template: function() { return '<div data-ng-click="load_page()'></div>; },
You can call scope methods in directives like this:
- Pass in a parameter to the get_events() call: <pager list="events" max="max_page" getl="get_events( currentPage )"></pager>
- Then use the parameter in the directive code by passing in an object with a property which corresponds to the parameter name:
scope.load_page = function(increment) { scope.current_page += increment; scope.getl({ currentPage: scope.current_page }); }

The type error you have given is hard to interpret, because it is hard to know if it is just because of the template string issue I described above, or something else.

answered Oct 12, 2015 at 21:13

James Henry

8446 silver badges12 bronze badges

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

2 Comments

ssougnez Over a year ago

Sorry, I edited a bit the code while I was posting the question, so the missing " was because of that. However, you answered my question thanks to the "{currentPage: scope.current_page}". I just tested and it works like a charm. Thanks a lot.

James Henry Over a year ago

Excellent! Glad to hear it

Pankaj Parkar · Accepted Answer · 2015-10-12 21:14:56Z

1

First thing your template function is missing " that may not be the problem but you should fix it, also your load_page is expecting increment parameter. As you passed nothing from ng-click function while calling load_page method, this line scope.current_page += increment; the value of current page becomes undefined because 1 + undefined = undefined

template: function()
{
    return '<div data-ng-click="load_page(1)"></div>';
},

Controller

scope.load_page = function(increment) {
    scope.current_page += increment;
    scope.getl({ curPage: scope.current_page});
}

Markup

<pager list="events" max="max_page" getl="get_events(curPage)"></pager>

answered Oct 12, 2015 at 21:14

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

Using bound function in AngularJS directive in the link function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related