CODEWITHSUNDEEP
javascriptjqueryangularjs
singingfish
singingfish

Reputation: 3167

Integrating a jquery plugin into angular js

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.

Upvotes: 1

Views: 133

Answers (1)

Walter Brand
Walter Brand

Reputation: 689

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

Upvotes: 3

Related Questions