jQuery和AngularJS不能一起使用

Question

我正在使用RequireJS和Angular，但它们在我的设置中无法一起工作。当jQuery版本为1.7.2时，一切正常。然而，我想使用jQuery 1.8.1和jQuery UI，即使使用angular应用程序也无法初始化我的主模块。

问题如下： 大小写敏感变量：jQuery和jquery。在jquery 1.8.1源代码中，他们定义了window.jQuery。而早期版本1.7.2则定义了window.jquery。

因为我想在我的应用程序中使用jQuery UI，所以包含了文件jquery-ui-1.8.23.custom.min.js。在包含后，我收到了“jQuery未定义”的错误。

因此，我决定升级我的jQuery版本，并下载了该1.8.1版本。在jQuery源代码的结尾处，我发现这个版本定义了window.jQuery（与jQuery UI所需的正确大小写相同）。

我使用James Burke的github项目更新了require-jquery JS，并将其更新为jquery 1.8.1。

但是，包含更新的jQuery / RequireJS项目后，Angularjs停止工作。

我在Chrome控制台中看到以下错误：

如果我回退到1.7.2版本，Angular就能正常工作。或者，如果我编辑jQuery文件，将window.jQuery定义为window.jquery（注意大小写），它也能正常工作。但这意味着jQuery UI将无法使用。

- S Gupta

---

你尝试过包含jQuery然后说，“window.jquery = jQuery;”吗？ 然后jquery和jQuery都将被定义（别名为相同的内容），两个包都应该可以正常工作。 - Ed Bayiates

是的，我尝试过了。使用两个版本，AngularJS 都报错说找不到模块名“manager”。我认为我的问题更多与 RequireJS 有关，而不是 AngularJS。我的项目使用了 RequireJS，所以我想知道是否有人尝试在 RequireJS 项目中包含 jQuery UI 和 Angular。 - S Gupta

Answer 1

使用jQuery的noConflict方法是解决此问题的一种更优雅且具有未来性的方案。

在http://api.jquery.com/jQuery.noConflict/上查看详细文档。

更新（来自链接中的示例）：

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>

- Ayame__

---

如果你在回答中直接放入文档中的代码示例，而不是让用户去访问链接找到所需信息，那么这将是一个更好的答案 :) - Jimbo

Answer 2

我通过删除 jQuery 源码中的一行代码，使 $ 和 jQuery 这两个全局变量不再冲突。这行代码大概长成这样：window.jQuery = window.$ = jQuery。

如果你同时使用 AngularJS 和 RequireJS，也遇到了类似的问题，需将这些行也移除。

此外，你需要在项目中使用jqueryui-amd工具。从 Github 页面下载该工具，并将其转换为 AMD 模块，以支持 jQuery UI 脚本。

我利用 AngularJS 的“指令”功能，在 HTML 元素上扩展了 jQuery UI 组件，使其更好地复用。

在我的项目中，我曾爱恨交加地使用 AngularJS，有时甚至在 Twitter 上公开表示自己讨厌 AngularJS。但是，在过去一个月里实施并完成了两个项目之后，我对何时该使用它、何时不应使用它有了相当好的理解。

以下是我创建的 jsFiddle 示例，演示了如何在 AngularJS 中使用 jQuery UI：

http://jsfiddle.net/samunplugged/gMyfE/2/

- S Gupta

---

我认为这不应该成为接受的答案。你不应该需要编辑jQuery源代码，这不是一个好的实践。首先，当你（或者之后的某个人）需要升级jQuery时，它会产生不必要的维护开销。 - Robert Ngetich

Answer 3

我经过两天的尝试，轻松解决了这个问题...

在尝试时，

直接将Slider Jquery文件包含到view.html中。从index.html文件中删除jquery。

- Deepak