angular js - including jquery plugins

Question

I've just stepped into Angular JS.

I've created Single page web app.

Now I wanted to add some of my jquery plugins into the project.But the straight jquery methods doesn't work.

And I googled and searched SO. One of the link. Plunkr doesn't work. Another link, but no documentaion.

And I couldn't find a documentation on including the plugins.

All I found was to create directive. And have some basic info on angular directives. But this basic steps are not good for me to get involved in creating custom directives to jquery plugins.

I'm trying to include jquery sparkline in my angular project. And found this. But I have no idea on how to use it.

How can I include various other jquery plugins?
How should I design my directive to include the jquery plugins?
Is there anyother angular plugin available to do this, something similar to highcharts-ng?

Thanks in advance.

http://angular-ui.github.io/ui-utils/#/jq There are lots of examples, however it would help if you produced some code specific to your question and asked about that. — lucuma, Jul 04 '14 at 13:43

score 2 · Accepted Answer · edited May 23 '17 at 10:32

This answer isn't directly aimed at your specific case - using sparkline - though is more a general 'how to go about using jquery plugins with angular'

Depending on the plugin some of them can be very difficult to 'Angular-ize'

That said your first step would be to use, as you mention, are directives. These are what you manipulate the DOM with.

So as a starting block, what I tend to do is wrap my JQuery plugin (if no angular one is available) in a directive.

Something like this pseudo-code.

myApp.directive('myPluginWrapper', function(){
    return{
       restrict: 'A', // not needed, but what i use
       link: function(scope,element,attrs){
         // element, in this case, is the same as jquery $(myelement)
          // if your jquery plugin runs off the element you can do something like:
           element.myPlugin();

          // if your plugin takes options you can put these in your directive attributes
          // E.G the example plugin wants an ID 3
          var pluginData = {};
          pluginData.ID = attrs.myDirectiveDataId;

          // then pass it into your plugin
           element.myPlugin(pluginData);

      }

    }
});

You could then, in html, use this directive by using:

<div my-pluggin-wrapper  my-directive-data-id="3"></div>

again, this is just an example of how you can, at the basic level, initiate your jquery plugin on a given element.

The important thing to remember is that if you are loading Jquery then all the usual JQuery methods are available to the element

Also, a must-read - as you're stepping into Angular the hardest part is trying to NOT think in JQuery.. read this, it's an awesome read. How do I “think in AngularJS” if I have a jQuery background?

angular js - including jquery plugins

1 Answers1