jQuery y AngularJS no funcionan juntos

Question

Estoy usando RequireJS y Angular pero no están trabajando juntos en mi configuración. Las cosas funcionan bien cuando la versión de jQuery es 1.7.2. Sin embargo, quería usar jQuery 1.8.1 y jQuery UI y la aplicación angular incluso falla al inicializar mi módulo principal con esto.

aquí está el problema:

minúsculas Variables: jQuery y jQuery. En el código fuente de jquery 1.8.1, hacia el final han definido window.jQuery. Donde, como en la versión anterior 1.7.2 tenía window.jquery definido.

Como deseo utilizar jQuery UI en mi aplicación, incluí el archivo jquery-ui-1.8.23.custom.min.js. Después de incluirlo, recibí el error de que "jQuery" no está definido.

Por lo tanto, decidí actualizar mi versión de jQuery y descargar dicha versión 1.8.1. Hacia el final del código fuente de jQuery pude ver que esta versión definía window.jQuery (caso correcto según lo necesitado por jQuery UI).

Actualicé mi require-jquery JS con la última versión del proyecto github James Burke y lo actualicé con jquery 1.8.1.

Pero incluyendo el proyecto jQuery/RequireJS actualizado, angularjs ha dejado de funcionar.

me sale este error en la consola de Chrome:

Si puedo volver a 1.7.2 obras angulares. O si edito el archivo jQuery para definir window.jquery en vez de window.jQuery (tenga en cuenta el caso), nuevamente funciona. Pero eso significa que jQuery UI no lo hará.

Answer 1

He solucionado esta solución eliminando la línea de la fuente jQuery que hizo $ y jQuery las variables globales. Esta línea se ve algo así como window.jQuery = window.$ = jQuery.

Si también está utilizando AngularJS con RequireJS y se enfrentan con un problema similar, elimine estas líneas.

Además, tendrá que usar jqueryui-amd en su proyecto. Descargue la utilidad desde la página de Github y convertirá la secuencia de comandos de jQuery UI a los módulos de AMD.

Utilizando la función AngularJS llamada 'directivas' para extender los elementos HTML, pude utilizar los componentes de la interfaz de usuario de jQuery de manera sana y reutilizable.

Debo decir que odié y amé a AngularJS mientras trabajaba en mi proyecto, a veces incluso les hice saber a todos en Twitter que odiaba AngularJS. Sin embargo, después de haber implementado y terminado dos proyectos en el último mes, tengo bastante buena idea de cuándo usarlo y cuándo no usarlo.

Aquí está uno jsFiddle he creado para demostrar el uso de jQuery UI con AngularJS:

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

Answer 2

Utilizando el método noConflict de jQuery es una solución más elegante y prueba de futuro para este problema.

Ver extensa documentación sobre http://api.jquery.com/jQuery.noConflict/

ACTUALIZACIÓN (ejemplo desde el enlace):

<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

fijar fácilmente esto después de mis dos días de prueba ..

Cuando tratan

Incluir el archivos Slider Jquery en particular a view.html directamente. eliminar jquery del archivo index.html