CODEWITHSUNDEEP
javascriptjqueryangularjs
Arpit Kumar
Arpit Kumar

Reputation: 2249

what is the best way to use jQuery plugin into Angular js

I am using a jQuery plugin with Angular project but with the jQuery way like 

    $(document).ready(function(){
      //calling plugin here
    });

This is working fine. I know this is not the right way to do it and it's not highly recommended, but I have already searched a couple of blogs and websites on this topic. They said that we can create directive for this but I am not able to understand how I can create any directive for a jQuery plugin and how it will work? Is it possible to create an Angular directive for each jQuery plugin?

Upvotes: 0

Views: 195

Answers (3)

AbhiGoel
AbhiGoel

Reputation: 201

You can create something like this

App.directive('jqueryPlugInDirective', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        $(element).[jqueryPlugin](ConfigOptions);
      }
    };
});

And your html will be something like 

 <script type="text/javascript" src="pluginLibFile.js"></script>    
 <div jquery-plug-in-directive></div>

Upvotes: 2

Atul Sharma
Atul Sharma

Reputation: 10730

Well I prefer to use anonymous function passing passing global jQuery element. 

(function($){
  //code 
})(jQuery);

Using anonymous function and passing jQuery as parameter eliminates the issues arising due to overriding of $ by some other library.
As we are passing (JQuery) global object as parameter and receiving it into ($) so, $ is now with jQuery no matter if its overridden..

However, you can go with native Angular jQuery version .. jQLite also.. using angular.Element().

You can read more about differences .. jQuery document.ready vs self calling anonymous function

Upvotes: -1

Dev1ce
Dev1ce

Reputation: 5954

It's not recomended to mix up jQuery and AngularJs but, Incase you just have to, You need to work with Angular's jqLite,

Here's the link for some reference - https://docs.angularjs.org/api/ng/function/angular.element

Upvotes: 0

Related Questions