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? ```

``` Thanks ahead

Accepted Answer

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

Correct way to integrate jQuery plugins in AngularJS

Solution

Problem