Integrating a jquery plugin into angular js

Question

I'm trying to integrate the maphilight jquery plugin into an angular app. I've made some progress with pulling the plugin into the app and making a directive that uses it, but I'm stuck right now.

Here's a plunker illustrating where I am with this. Right now the compile directive is firing, but the bind to click isn't.

My final goal with this is to have all image areas always highlighted on the imagemap so the user can see where they are. Any tips on how that's achieved through reusing this plugin also gratefully received.

Walter Brand · Accepted Answer · 2014-03-27 08:10:09Z

3

since you use the compile function, the link function of your directive is ignored. That is why the binding to click never happens.

Make your compile function return the link function and it should work.

compile: function(){
    ....
    var linkFunction = function($scope, element, atttributes) {
        // enter the content of your link function here
    }

    return linkFunction;
}

But you may want to remove the compile function altogether and keep the link attribute as it is, as the compile function seems to be doing nothing at all.

For more info, check: http://tutorials.jenkov.com/angularjs/custom-directives.html

edited Mar 27, 2014 at 8:10

answered Mar 27, 2014 at 7:43

Walter Brand

6893 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Integrating a jquery plugin into angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related