jQuery和AngularJS没有合作

我正在使用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不会。

使用jQuery的noConflict方法是解决此问题的更优雅且面向未来的解决方案。

查看http://api.jquery.com/jQuery.noConflict/上的大量文档

更新(链接示例):

 

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

如果您还在使用带有RequireJS的AngularJS并且遇到类似的问题,请删除这些行。

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

使用名为“指令”的AngularJSfunction来扩展HTML元素,我能够以可重用和理智的方式使用jQuery UI组件。

我要说的是,在为我的项目工作时,我讨厌并喜欢AngularJS,有时甚至让Twitter上的每个人都知道我讨厌AngularJS。 但是,在上个月完成并完成了两个项目后,我对何时使用它以及何时不使用它有相当好的想法。

这是我创建的一个jsFiddle,用于演示使用AngularJS的jQuery UI:

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

在我的两天尝试之后轻松解决这个问题..

试试的时候

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