Correct way to integrate jQuery plugins in AngularJS

jquery-plugins angularjs

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.

I don't know how I feel about eval in any circumstance...heard its just bad practice

It should be $(element).pluginActivationFunction(scope.$eval(attrs.directiveName)); without the quotes.

d512

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

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 Not sure what you mean. Can you give an example?

can you explain what exactly does all $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName)); means ?

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.

Why does the script need to come last ?

Community

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

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US