218

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

3
  • 4
    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. Commented Jun 5, 2013 at 8:38
  • I don't know how I feel about eval in any circumstance...heard its just bad practice
    – sksallaj
    Commented Sep 14, 2015 at 20:14
  • 1
    It should be $(element).pluginActivationFunction(scope.$eval(attrs.directiveName)); without the quotes. Commented Jan 29, 2016 at 15:55

2 Answers 2

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

9
  • 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) Commented Apr 25, 2014 at 9:45
  • 1
    @Fractaliste Not sure what you mean. Can you give an example? Commented Apr 26, 2014 at 9:33
  • can you explain what exactly does all $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName)); means ? Commented Nov 4, 2014 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
    Commented May 14, 2015 at 20:19
  • Why does the script need to come last ?
    – Mike R
    Commented May 20, 2015 at 14:22
0

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.