jQuery 和 AngularJS 不能一起工作 [英] jQuery and AngularJS not working together
问题描述
我正在使用 RequireJS 和 Angular，但它们在我的设置中没有协同工作.当 jQuery 版本为 1.7.2 时一切正常.但是我想使用 jQuery 1.8.1 和 jQuery UI 和 angular 应用程序甚至无法用这个初始化我的主模块.
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 源代码中，最后他们定义了 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 源代码的末尾，我可以看到这个版本定义了 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).
我用 James Burke github 项目的最新版本更新了我的 require-jquery JS，并用 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 angular 作品.或者，如果我编辑 jQuery 文件来定义 window.jquery 而不是 window.jQuery(注意大小写)，它再次起作用.但这意味着 jQuery UI 不会.
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 = window.$ = 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.
如果您同时使用 AngularJS 和 RequireJS 并面临类似问题，请删除这些行.
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，用于演示 jQuery UI 与 AngularJS 的使用:
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屋！
