Como usar plugins jQuery no AngularJS? - javascript, jquery, angularjs, jquery-plugins, angularjs-directive

Estou usando o AngularJS 1.2 e tentando incluir um plugin jQuery por meio de uma diretiva angular. Como exemplo, eu escolhi um plugin chamado espectro. Não incluí (e não desejo incluir) o jQuery separadamente, pois o AngularJS inclui o jqLite, uma versão menor do jQuery.

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

No entanto, quando tento carregar o aplicativo, recebo:

Não detectado ReferenceError: jQuery não está definido spectrum.js: 1888 (função anônima)

O erro decorre da inicialização do plug-in:

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

Qual é a solução genérica para incluir plugins jQuery no AngularJS? Existe alguma maneira elegante de conseguir isso sem incluir a biblioteca jQuery completa?

O AngularJS vem com um liteimplementação do jQuery referido para como jqLite. Para os propósitos da Angular, esse é efetivamente jQuery, embora extremamente estripado. Os criadores do Angular acreditam que o A API jqLite é suficiente para quase todas as aplicações, se utilizada devidamente.

Respostas:

Como "Arun P Johny" disse, você PRIMEIRO deve incluir o jquery javascript e, em seguida, o seu plugin, que depende do jQuery

o que você quer fazer é no plug-in, em vez de (window, jQuery) exportar jqLite, que é angular.element. So (window, angular.element);

Ou ainda mais fácil antes de inicializar seu aplicativo angular, adicione window.jQuery = window. $ = angular.element;

Como a primeira linha de js no seu arquivo de script principal,se o plugin não usar nenhum método que o jqLite não cubra, você está com sorte! Caso contrário, talvez inclua o Zepto para uma alternativa leve ao jquery e no retorno do plugin (window, Zepto);