jQuery和AngularJS没有一起工作 [英] jQuery and AngularJS not working together

问题描述

我使用RequireJS和角度，但他们没有在我的成立工作在一起。事情做工精细，当jQuery的版本是1.7.2。不过，我想使用jQuery 1.8.1和jQuery UI和应用的​​角度，甚至无法初始化与此有关我的主要模块。

I am using RequireJS and Angular but they are not working together in my set up. Things work fine when jQuery version is 1.7.2. However I wanted to use jQuery 1.8.1 and jQuery UI and angular app even fails to initialize the my main module with this.

下面的问题是：

区分大小写变量：jQuery的和jQuery。 jQuery的1.8.1源$ C ​​$ C，接近年底，他们已经定义window.jQuery。凡在早期版本1.7.2已经window.jquery定义。

Case sensitive variables: jQuery and jquery. In jquery 1.8.1 source code, towards the end they have defined window.jQuery. Where as in earlier version 1.7.2 had window.jquery defined.

由于我想使用jQuery UI在我的应用程序包括在该文件的jQuery-UI-1.8.23.custom.min.js。包括它后，我得到了错误的jQuery的不确定。

Since I want to use jQuery UI in my app included the file jquery-ui-1.8.23.custom.min.js. After including it I got the error that "jQuery" is undefined.

所以，我决定升级我的jQuery的版本，并下载该版本1.8.1。对jQuery的源$ C ​​$ C结束时，我看得出来，这个版本中定义window.jQuery（根据需要由jQuery UI的正确的情况下）。

So, I decided to upgrade my jQuery version and downloaded the said 1.8.1 version. Towards the end of the jQuery source code I could see that this version defined window.jQuery (correct case as needed by jQuery UI).

我更新了我的要求，jQuery的JS与詹姆斯·伯克GitHub上的项目最新版本，并与jQuery 1.8.1更新它。

I updated my require-jquery JS with latest version from James Burke github project and updated it with jquery 1.8.1.

但包括更新的jQuery / RequireJS项目，angularjs已停止工作。

But including the updated jQuery/RequireJS project, angularjs has stopped working.

我得到这个错误在Chrome控制台：

I get this error in Chrome console:

如果我恢复到1.7.2角的作品。或者，如果我编辑的jQuery文件来定义window.jquery而不是window.jQuery（请注意大小写）再次工作。但是，这意味着jQuery用户界面不会。

If I revert to 1.7.2 angular works. Or if I edit jQuery file to define window.jquery instead of window.jQuery (note the case) it again works. But that means jQuery UI won't.

推荐答案

我通过从jQuery的源代码行这使得$和jQuery全局变量固定的这一解决方案。该行看起来像 window.jQuery =窗口$ = jQuery的。

I fixed this solution by removing the line from jQuery source which made $ and jQuery the global variables. This line looks something like window.jQuery = window.$ = jQuery.

如果您还使用与RequireJS AngularJS，面临着类似的问题，删除这些行。

If you are also using AngularJS with RequireJS and are facing similar problem, remove these lines.

此外，你将不得不使用 jQueryUI的，AMD 在项目中。从GitHub的页面下载程序，它会jQuery UI的脚本转换为AMD模块。

Furthermore, you will have to use jqueryui-amd in your project. Download the utility from the Github page and it will convert jQuery UI script to AMD modules.

使用AngularJS功能，称为指令扩展HTML元素我能够在可重复使用的和理智的方式使用jQuery UI组件。

Using the AngularJS feature called 'directives' to extend HTML elements I was able to use jQuery UI components in reusable and sane manner.

我有说，我讨厌和喜爱AngularJS对我的项目的工作，有时甚至让每个人都在Twitter上知道我讨厌AngularJS一会儿。然而，在已经过去一个月实施，完成了两个项目，我对什么时候使用它，什么时候不使用它相当不错的主意。

I've to say that I've hated and loved AngularJS while working on my project, sometimes even letting everybody on Twitter know that I hate AngularJS. However, after having implemented and finished two projects over the last month I have fairly good idea on when to use it and when not to use it.

下面一个的jsfiddle我创建演示与AngularJS使用jQuery用户界面的：

Here is one jsFiddle I've created to demonstrate the use of jQuery UI with AngularJS:

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

这篇关于jQuery和AngularJS没有一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！