Correct way to integrate jQuery plugins in AngularJS

Question

I was wondering what is the correct way to integrate jQuery plugins into my angular app. I've found several tutorials and screen-casts but they seem catered to a specific plugin.

For Example: http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://www.youtube.com/watch?v=8ozyXwLzFYs

Should I create a directive like so -

App.directive('directiveName', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName));
        }
    };
});

And then in the html call the script and the directive?

<div directiveName ></div>
<script type="text/javascript" src="pluginName.js"></script>

Thanks ahead

yes, the best approach is to wrap the required jQuery plugin's inside a directive, so you get the benefit of scope variables & control the initialization / method invokation. — Bhaskara Kempaiah, Jun 05 '13 at 08:38
I don't know how I feel about eval in any circumstance...heard its just bad practice — sksallaj, Sep 14 '15 at 20:14
It should be `$(element).pluginActivationFunction(scope.$eval(attrs.directiveName));` without the quotes. — Maxim Zubarev, Jan 29 '16 at 15:55

score 144 · Accepted Answer · edited May 06 '16 at 18:53

144

Yes, you are correct. If you are using a jQuery plugin, do not put the code in the controller. Instead create a directive and put the code that you would normally have inside the link function of the directive.

There are a couple of points in the documentation that you could take a look at. You can find them here:
Common Pitfalls

Using controllers correctly

Ensure that when you are referencing the script in your view, you refer it last - after the angularjs library, controllers, services and filters are referenced.

EDIT: Rather than using $(element), you can make use of angular.element(element) when using AngularJS with jQuery

edited May 06 '16 at 18:53

d512

32,267
28
81
107

answered Jun 05 '13 at 08:43

callmekatootie

10,989
15
69
104

1

How about jQuery plugins' parameters which allow HTML content? (for example if I want to add an `ng-click` directive through this plain text HTML parameter) – Fractaliste Apr 25 '14 at 09:45
1

@Fractaliste Not sure what you mean. Can you give an example? – callmekatootie Apr 26 '14 at 09:33
can you explain what exactly does all $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName)); means ? – Gaurav_soni Nov 04 '14 at 12:15
I am almost a total newbie of angularjs. I tried to use several jquery plugins and none of them worked. Do we really need to do this ? Can't they just work along angularjs ? It sound so boilerplate to me. – Moebius May 14 '15 at 20:19
Why does the script need to come last ? – Mike R May 20 '15 at 14:22
@MikeR That's cause there is a possibility that the scripts that arrive later may override the behaviour required by your plugin. To make sure that the plugin behaviour is still intact, you put it last. – callmekatootie May 28 '15 at 07:03
Is there any advantage to use angular.element(element) over $(element)? – lvarayut Jul 10 '15 at 08:10
@LVarayut None. `angular.element` is an alias to `jQuery`. Since angularjs also as a convention of using `$` (example, `$scope`), you can use `angular.element` to avoid confusion – callmekatootie Jul 10 '15 at 08:54
You didn't explain WHY do we need link function instead of a controller. Your links don't have this information too. – kolobok Oct 05 '16 at 11:00

score 0 · Answer 2 · edited May 23 '17 at 12:34

i have alreay 2 situations where directives and services/factories didnt play well.

the scenario is that i have (had) a directive that has dependency injection of a service, and from the directive i ask the service to make an ajax call (with $http).

in the end, in both cases the ng-Repeat did not file at all, even when i gave the array an initial value.

i even tried to make a directive with a controller and an isolated-scope

only when i moved everything to a controller and it worked like magic.

example about this here Initialising jQuery plugin (RoyalSlider) in Angular JS

Correct way to integrate jQuery plugins in AngularJS

2 Answers2

Linked