Correct way to integrate jQuery plugins in AngularJS

Jquery PluginsAngularjs

Jquery Plugins Problem Overview


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

Jquery Plugins Solutions


Solution 1 - Jquery Plugins

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

Solution 2 - Jquery Plugins

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 https://stackoverflow.com/questions/23934698/initialising-jquery-plugin-royalslider-in-angular-js/32498228#32498228

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGidonView Question on Stackoverflow
Solution 1 - Jquery PluginscallmekatootieView Answer on Stackoverflow
Solution 2 - Jquery PluginsbresleveloperView Answer on Stackoverflow