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

Question

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?

refer this link: https://bencentra.com/code/2015/09/29/jquery-plugins-angular-directives.html — Sunil Kumar, Sep 24 '16 at 18:15

score 2 · Answer 1 · answered Sep 24 '16 at 20:29

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>

score 0 · Answer 2 · answered Sep 24 '16 at 18:05

0

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

answered Sep 24 '16 at 18:05

Dev1ce

5,390
17
90
150

what is wrong if i go my way? as i shown in question. – Arpit Kumar Sep 24 '16 at 18:12
I know this basic things. As you have printed hello, my goal is to call jQuery plugin inside this controller how can we call do you have any idea? – Arpit Kumar Sep 24 '16 at 18:18
1

maybe this might help - http://stackoverflow.com/questions/33515947/using-jquery-function-inside-angularjs-controller – Dev1ce Sep 24 '16 at 18:21
I am glad @AniruddhaRaje mentioned this, there is no need for jQuery in Angular, it is not recommended to use jQuery with AngularJS and it is really a AngularJS best practice to NOT include jQuery, if you are manipulating the DOM Javascript is all you need – Brian Ogden Sep 24 '16 at 18:28
doesn't answer the question – charlietfl Sep 24 '16 at 18:55

score -1 · Answer 3 · edited May 23 '17 at 12:24

-1

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

edited May 23 '17 at 12:24

Community

1
1

answered Sep 24 '16 at 18:04

Atul Sharma

9,397
10
38
65

Thanks but again we are using jQuery how this way is different and good to my way? – Arpit Kumar Sep 24 '16 at 18:13
1

@ArpitMeena your method has no issues untill we are using many libraries .. where some library may override `jQuery --- $` element .. now passing jQuery global object solves the issue which may arise due to overriding of `$` . You can see.. We are passing `(jQuery)` as parameter which is mapped as `($)` into the function .. and used inside the function. – Atul Sharma Sep 24 '16 at 18:20
@ArpitMeena one more thing to mention Angular provides its own jQuery extension `jQLite` you can always go with that without having any issue.. @Aniruddha Raje has already mentioned the same . – Atul Sharma Sep 24 '16 at 18:21
Thanks now i got the idea of directive. – Arpit Kumar Sep 24 '16 at 18:24
1

This has nothing to do with using a plugin and doesn't answer the question – charlietfl Sep 24 '16 at 18:55

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

3 Answers3