bower_component jquery插件未在angularjs应用程序中调用

Question

概述

我有几个打算在 AngularJS 应用程序中使用的 jQuery 插件。我通过 bower 安装我的 jQuery 插件。我使用 gulp-inject 将这些依赖项放在我的主 html 中。我在加载角度之前加载 jquery。我正在获取我获得的模板并将其组织起来，类似于 John Papa 处理他的Hot Towel AngularJS generator。

问题

没有调用旨在扩展 jQuery 的库。这些文件已加载，但从未制作过 jQuery 上的扩展名。以这两个 jQuery 插件为例：remarkable-bootstrap-notify 和 jquery.sparkline。这两个，当加载到页面中时，都会给出一个错误，指出我正在调用的来自这些库的函数之一不存在。

---

我尝试过的

如果我在浏览器中加载的文件中设置断点，我注意到上面的工厂代码确实被调用了，但是执行扩展（添加新功能）的代码没有运行。如果我通过添加一个 ...}(jQuery))) 来更改加载到我的页面中的 remarkable-bootstrap-notify 文件，它之前只是读取 ...}))，那么该库突然开始工作。

我在 jquery.sparkline 库上尝试了同样的修复，但这并不能使库正常工作。

显然，这不是一个理想的解决方案，因为下次我通过 bower 引入该库时，我的更改不再存在，从而破坏了我的应用程序依赖于这些库的功能。

注意

我正在尝试在指令中使用这些 jQuery 插件。这不是先发制人的想法，但我一直在读到这是解决人们与我的问题相似的问题的方法。但是，这对我来说没有任何区别。

更新

我现在已将此“修复”应用于 3 个库，暂时修复了该问题（jquery.sparkline、jquery.easypiechart 和 bootstrap-notify）。我的问题现在有一个更具体的更新，希望得到答复。

---

问题

拥有一个带有 jQ​​uery 插件依赖项的 AngularJS 应用程序似乎并不是一件愚蠢的事情，我认为这将是相当简单的。我会错过什么通常允许它工作的东西？我可以做些什么来处理我通过 bower 引入的所有这些依赖项？

更新

我的bower_components 文件夹中现在有 3 个库需要手动编辑才能工作。从图形上讲，我必须添加以下内容（在下图中突出显示）才能使库在我的应用程序中工作：

（这只是这些典型 jQuery 插件顶部出现的示例）

改写的问题：当我添加...(jQuery)... 时，我在做什么，而不是“我正在调用匿名函数，将jQuery 对象作为参数传递。”我得到那么多。但是为什么这不包含在我通过 bower 下载的库中？我的应用程序会迫使我进行这些手动编辑吗？这不可能是这些库的正常使用方式...

Answer 1

快速提问：你在说什么 jQuery 插件？为什么要尝试将 jQuery 代码破解到 Angular 中，您通常可以在其中找到已经为 Angular 编写的相同或更好的插件。

remarkable-bootstrap-notify 可以替换为AngularJS-toaster

jquery.sparkline 可以替换为Angular-chart

这是来自 docs.angularjs.org：

DOM 操作

停止尝试使用 jQuery 修改控制器中的 DOM。真的。这包括添加元素、删除元素、检索它们的内容、显示和隐藏它们。使用内置指令，或在必要时编写自己的指令来进行 DOM 操作。有关复制功能，请参见下文。

如果您正在努力改掉这个习惯，请考虑从您的应用程序中删除 jQuery。真的。 Angular 有 $http 服务和强大的指令，这几乎总是不必要的。 Angular 捆绑的 jQLite 具有一些最常用于编写 Angular 指令的特性，尤其是绑定到事件。