如何在 AngularJS 中使用 jQuery 插件？答案

【问题标题】：How to use jQuery plugins in AngularJS?如何在 AngularJS 中使用 jQuery 插件？
【发布时间】：2013-09-30 06:35:11
【问题描述】：

我正在使用 AngularJS 1.2 并尝试通过 Angular 指令包含一个 jQuery 插件。例如，我选择了一个名为 spectrum 的插件。我没有单独包含（也不希望包含）jQuery，因为据说 AngularJS 包含 jqLite，一个较小的 jQuery 版本。

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

但是，当我尝试加载应用程序时，我得到：

Uncaught ReferenceError: jQuery is not defined spectrum.js:1888 （匿名函数）

错误源于插件的初始化：

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

在 AngularJS 中包含 jQuery 插件的通用解决方案是什么？在不包括完整的 jQuery 库的情况下，有什么优雅的方法可以实现这一点吗？

AngularJS 与 jQuery 的精简版实现捆绑在一起。作为 jqLite。对于 Angular 而言，这实际上是 jQuery，虽然是一个非常内脏的。 Angular 的创造者相信如果使用 jqLite API，几乎可以满足所有应用程序正确。

【问题讨论】：

页面中是否包含jQuery库以及是否包含在插件之前
如果插件依赖jquery，没有jquery就不能使用。 AngularJS 不会做任何魔法让依赖消失:)
包含 jQuery，因为它是一个“jQuery”插件。
好的，但是 jqLite 呢？我知道有一个像 Zepto 这样的框架，它是 jQuery 的“替代品”。我希望我能以同样的方式使用 jqLite..？
您可以使用 jQuery lite - Here 是受支持的 jQuery 函数列表。在你的情况下，如果你只使用上面链接中提到的那些函数，你不需要使用 jQuery - 但插件似乎需要 jQuery...

标签： javascript jquery angularjs jquery-plugins angularjs-directive

【解决方案1】：

正如“Arun P Johny”所说，您必须首先包含 jquery javascript，然后包含依赖于 jQuery 的插件

【讨论】：

【解决方案2】：

您想要做的是在插件中而不是（窗口，jQuery）导出 jqLite，它是 angular.element。所以 (window, angular.element);

或者在初始化你的 Angular 应用之前更容易添加 window.jQuery = window.$ = angular.element;

作为主脚本文件中的第一行 js，如果插件不使用 jqLite 未涵盖的任何方法，那么你很幸运！否则，可能包括 Zepto 以作为轻量级 jquery 替代方案并在插件返回（窗口、Zepto）中；

【讨论】：