jQuery and AngularJS not working together

Question

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 jQue

Answer 1

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

Answer 2

Using jQuery's noConflict method is a more elegant and future proof solution to this problem.

View extensive documentation on 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>

Answer 3

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.

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

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.

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

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.

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

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