How to use jQuery plugins in AngularJS?

Question

I am using AngularJS 1.2 and trying to include a jQuery plugin via an Angular Directive. As an example I have chosen a plugin called spectrum. I have not included (and do not wish to include) jQuery separately, as AngularJS is said to include jqLite, a smaller version of jQuery.

myDirs.directive('spectrumDir', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            angular.element(element).spectrum(scope.$eval(attrs.spectrumDir));
        }
    };
});

However, when i try to load the app, I get:

Uncaught ReferenceError: jQuery is not defined spectrum.js:1888 (anonymous function)

The error stems from the initialization of the plugin:

(function (window, $, undefined) {
    …code…
})(window, jQuery);

What is the generic solution to including jQuery plugins in AngularJS? Is there any elegant way to achieve this without including the full jQuery library?

AngularJS comes bundled with a lite implementation of jQuery referred to as jqLite. For Angular’s purposes, this is effectively jQuery, albeit an extremely gutted one. The creators of Angular believe the jqLite API to be sufficient for nearly every application if utilized properly.

do you have jQuery library included within the page and whether it is included before the plugin — Arun P Johny
– Arun P Johny, Commented Sep 30, 2013 at 6:36
If the plugin is dependent on jquery, you cannot use it without jquery. AngularJS is not going to do any magic to let the dependency go away :) — Chandermani
– Chandermani, Commented Sep 30, 2013 at 6:40
Ok, but what about jqLite? I know there are a frameworks like Zepto, that are "drop-in replacements" for jQuery. I was hoping I could use jqLite in the same way..? — Per Quested Aronsson
– Per Quested Aronsson, Commented Sep 30, 2013 at 6:54
You can use jQuery lite - Here is a list of supported jQuery functions. In your case, if you would have made use of only those functions mentioned in the above link, you need not use jQuery - but the plugin seems to require jQuery... — callmekatootie
– callmekatootie, Commented Sep 30, 2013 at 9:42

Phil · Accepted Answer · 2013-10-16 15:01:07Z

2

As "Arun P Johny" said, you must FIRST include the jquery javascript and then your plugin which depends on jQuery

answered Oct 16, 2013 at 15:01

Phil

1335 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JSWhisperer · Accepted Answer · 2013-12-20 10:21:42Z

1

what you want to do is in the plugin either instead of (window, jQuery) export jqLite which is angular.element. So (window, angular.element);

Or even easier before initializing your angular app add window.jQuery = window.$ = angular.element;

As the first line of js in your main script file, if the plugin doesn't use any methods that jqLite doesn't cover you are in luck! Otherwise perhaps include Zepto for a light weight jquery alternative and in the plugin return (window, Zepto);

answered Dec 20, 2013 at 10:21

JSWhisperer

6837 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to use jQuery plugins in AngularJS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related