Angular JS - 将 jquery 插件添加到 jQlite答案

【问题标题】：Angular JS - Adding a jquery plugin to jQliteAngular JS - 将 jquery 插件添加到 jQlite
【发布时间】：2015-04-20 15:39:15
【问题描述】：

我需要在 $element 上做一些 dom 遍历，但是 jQuery 或 jQlite 不做我需要的开箱即用的，所以我需要使用一个名为 closeChild 的 jQuery 插件。

https://github.com/lolmaus/jquery.closestchild/blob/master/jquery.closestchild.js

我已经使用 bower 进行了安装，我试图在脚本标签中的 angular.min.js 之后加载它，但仍然出现以下错误。

Uncaught TypeError: Cannot read property 'fn' of undefined

所以，我假设 Angular 附带的 jQlite 默认情况下没有给你 $ 可以使用？还是我只是按错误的顺序做事？

【问题讨论】：

您正在编写的指令中是否需要这样做？
是的，我需要能够向下遍历以在主 $element 中找到一个元素，以便我可以对其应用一个类。

标签： javascript jquery angularjs jqlite

【解决方案1】：

不，angular.element (jqLite) 不会导出 $ 全局变量。所以你不能在没有 jQuery 的情况下使用任何带有 Angular 的 jQuery 插件。在某些情况下，如果您在包含插件之前手动创建 $ 引用，就像它是 jQuery 一样，您可以解决它。比如这样：

<script src="path-to-angular.js"></script>
<script>
window.$ = window.jQuery = angular.element;
window.$.fn = window.$.prototype;
</script>
<script src="path-to-jquery.plugin.js"></script>

但是，在您的情况下，它不起作用，因为感兴趣的插件使用了 jqLite 未实现的 $.fn.filter 方法。这是所有可用angular.element methods 的列表。

您可以自己实现其中的一些并在插件之前包含..

但是，如果您想使用 jQuery 插件，我建议您实际使用 jQuery。

【讨论】：

谢谢。似乎很遗憾必须包含整个 jQuery，只是为了在选择器上找到“最浅”的匹配项。我可能会研究一种纯 JS 方式来做到这一点。

【解决方案2】：

jQlite 不支持 jQuery 插件。实际上，它应该是一个轻量级的选择器工具——而不是像 jQuery 那样支持扩展的重量级工具。

你有两个选择：

使用 JavaScript 实现功能 ( element.getElementBySelector('foo)[0] )。
在您的项目中包含 jQuery。

我个人会使用选项 1。

【讨论】：