web-dev-qa-db-fra.com

jQuery et AngularJS ne fonctionnent pas ensemble

J'utilise RequireJS et Angular mais ils ne fonctionnent pas ensemble dans ma configuration. Les choses fonctionnent bien lorsque la version jQuery est 1.7.2. Cependant, je voulais utiliser jQuery 1.8.1 et jQuery UI et angular échoue même à initialiser le module principal my avec cela.

Voici le problème:

Variables sensibles à la casse: jQuery et jquery. Dans le code source de jquery 1.8.1, vers la fin, ils ont défini window.jQuery. Où, comme dans la version précédente 1.7.2, window.jquery était défini.

Puisque je veux utiliser jQuery UI dans mon application, j'ai inclus le fichier jquery-ui-1.8.23.custom.min.js. Après l'avoir inclus, j'ai eu l'erreur que "jQuery" n'est pas défini.

J'ai donc décidé de mettre à niveau ma version de jQuery et j'ai téléchargé ladite version 1.8.1. Vers la fin du code source jQuery, j'ai pu voir que cette version définissait window.jQuery (casse correcte selon les besoins de l'interface utilisateur jQuery).

J'ai mis à jour mon JS de require-jquery avec la dernière version du projet github de James Burke et l'ai mis à jour avec jquery 1.8.1.

Mais avec le projet jQuery/RequireJS mis à jour, angularjs a cessé de fonctionner.

J'obtiens cette erreur dans la console Chrome console:

Console Output

Si je reviens à 1.7.2 angular fonctionne. Ou si je modifie le fichier jQuery pour définir window.jquery au lieu de window.jQuery (notez le cas) cela fonctionne à nouveau. Mais cela signifie que jQuery UI a gagné 't.

javascriptjqueryjquery-uirequirejsangularjs
16
Sameer Gupta

J'ai corrigé cette solution en supprimant la ligne de la source jQuery qui faisait de $ et jQuery les variables globales. Cette ligne ressemble à window.jQuery = window.$ = jQuery.

Si vous utilisez également AngularJS avec RequireJS et rencontrez un problème similaire, supprimez ces lignes.

De plus, vous devrez utiliser jqueryui-AMD dans votre projet. Téléchargez l'utilitaire à partir de la page Github et il convertira le script jQuery UI en modules AMD.

En utilisant la fonctionnalité AngularJS appelée "directives" pour étendre les éléments HTML, j'ai pu utiliser les composants jQuery UI de manière réutilisable et sensée.

Je dois dire que j'ai détesté et aimé AngularJS tout en travaillant sur mon projet, laissant même parfois tout le monde sur Twitter savoir que je déteste AngularJS. Cependant, après avoir implémenté et terminé deux projets au cours du dernier mois, j'ai une assez bonne idée sur quand l'utiliser et quand ne pas l'utiliser.

Voici un jsFiddle que j'ai créé pour démontrer l'utilisation de jQuery UI avec AngularJS:

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

3
Sameer Gupta

L'utilisation de la méthode noConflict de jQuery est une solution plus élégante et évolutive à ce problème.

Afficher une documentation complète sur http://api.jquery.com/jQuery.noConflict/

MISE À JOUR (exemple du lien):

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
17
Ayame__

Résolu facilement cela après mes deux jours d'essais ..

Quand essayez

Incluez directement les fichiers Slider Jquery particuliers dans le fichier view.html. supprimer jquery du fichier index.html

1
Deepak