jQuery和AngularJS没有合作

Question

我正在使用RequireJS和Angular,但他们在我的设置中没有合作.当jQuery版本是1.7.2时,事情很好.但是我想使用jQuery 1.8.1和jQuery UI和角度应用程序甚至无法使用此初始化我的主模块.

这是问题所在:

区分大小写的变量: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角度的作品.或者,如果我编辑jQuery文件来定义window.jquery而不是window.jQuery(注意案例)它再次起作用.但这意味着jQuery UI不会.

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>

Answer 2

我通过从 jQuery 源代码中删除使 $ 和 jQuery 成为全局变量的行来修复此解决方案。这条线看起来像window.jQuery = window.$ = jQuery。

如果您还将 AngularJS 与 RequireJS 一起使用并且遇到类似的问题，请删除这些行。

此外，您必须在项目中使用jqueryui-amd 。从 Github 页面下载该实用程序，它将把 jQuery UI 脚本转换为 AMD 模块。

使用称为“指令”的 AngularJS 功能来扩展 HTML 元素，我能够以可重用且合理的方式使用 jQuery UI 组件。

我不得不说，在我的项目工作过程中，我对 AngularJS 又爱又恨，有时甚至让 Twitter 上的每个人都知道我讨厌 AngularJS。然而，在上个月实施并完成两个项目之后，我对何时使用它和何时不使用它有了相当好的想法。

这是我创建的一个 jsFiddle，用于演示 jQuery UI 与 AngularJS 的使用：

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