current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question
2  
do you have jQuery library included within the page and whether it is included before the plugin –  Arun P Johny Sep 30 '13 at 6:36
1  
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 Sep 30 '13 at 6:40
    
Include jQuery since it is a "jQuery" plugin. –  geniuscarrier Sep 30 '13 at 6:45
    
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 Sep 30 '13 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 Sep 30 '13 at 9:42
show 1 more comment

2 Answers 2

up vote 1 down vote

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

share|improve this answer
add comment
up vote 0 down vote

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);

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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