Javascript jQuery 和 AngularJS 不能一起工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12496834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery and AngularJS not working together
提问by Sameer Gupta
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.
我正在使用 RequireJS 和 Angular，但它们在我的设置中没有协同工作。当 jQuery 版本为 1.7.2 时一切正常。但是我想使用 jQuery 1.8.1 和 jQuery UI 和 angular 应用程序甚至无法用这个初始化我的主模块。
Here is the problem:
这是问题所在：
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 和 jquery。在 jquery 1.8.1 源代码中，最后他们定义了 window.jQuery。在早期版本 1.7.2 中定义了 window.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 UI，所以包含文件 jquery-ui-1.8.23.custom.min.js。包含它后，我收到了“jQuery”未定义的错误。
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 版本并下载了 1.8.1 版本。在 jQuery 源代码的末尾，我可以看到这个版本定义了 window.jQuery（jQuery UI 需要正确的大小写）。
I updated my require-jquery JS with latest version from James Burke github project and updated it with jquery 1.8.1.
我用 James Burke github 项目的最新版本更新了我的 require-jquery JS，并用 jquery 1.8.1 更新了它。
But including the updated jQuery/RequireJS project, angularjs has stopped working.
但是包括更新的 jQuery/RequireJS 项目，angularjs 已经停止工作。
I get this error in Chrome console:
我在 Chrome 控制台中收到此错误：
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.
如果我恢复到 1.7.2 angular 作品。或者，如果我编辑 jQuery 文件来定义 window.jquery 而不是 window.jQuery（注意大小写），它再次起作用。但这意味着 jQuery UI 不会。
采纳答案by Sameer Gupta
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.
我通过从 jQuery 源中删除使 $ 和 jQuery 成为全局变量的行来修复此解决方案。这条线看起来像window.jQuery = window.$ = jQuery.
If you are also using AngularJS with RequireJS and are facing similar problem, remove these lines.
如果您还使用 AngularJS 和 RequireJS 并面临类似问题，请删除这些行。
Furthermore, you will have to use jqueryui-amdin your project. Download the utility from the Github page and it will convert jQuery UI script to AMD modules.
此外，您必须在项目中使用jqueryui-amd。从 Github 页面下载该实用程序，它会将 jQuery UI 脚本转换为 AMD 模块。
Using the AngularJS feature called 'directives' to extend HTML elements I was able to use jQuery UI components in reusable and sane manner.
使用称为“指令”的 AngularJS 功能来扩展 HTML 元素，我能够以可重用和理智的方式使用 jQuery UI 组件。
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.
我不得不说，我在做我的项目时既讨厌又喜欢 AngularJS，有时甚至让 Twitter 上的每个人都知道我讨厌 AngularJS。但是，在上个月实施并完成了两个项目之后，我对何时使用它以及何时不使用它有了相当好的想法。
Here is one jsFiddle I've created to demonstrate the use of jQuery UI with AngularJS:
这是我创建的一个 jsFiddle，用于演示 jQuery UI 与 AngularJS 的使用：
回答by Ayame__
Using jQuery's noConflict method is a more elegant and future proof solution to this problem.
使用 jQuery 的 noConflict 方法是解决此问题的更优雅且面向未来的解决方案。
View extensive documentation on http://api.jquery.com/jQuery.noConflict/
查看http://api.jquery.com/jQuery.noConflict/ 上的大量文档
UPDATE (example from the link):
更新（来自链接的示例）：
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
回答by Deepak
Easily fixed this after my two days try..
我两天尝试后轻松解决了这个问题..
When try
当尝试
Include the particular Slider Jquery files to the view.html directly. remove jquery from index.html file
将特定的 Slider Jquery 文件直接包含到 view.html 中。从 index.html 文件中删除 jquery
