Bonne façon d'intégrer les plugins jQuery dans AngularJS

217

Je me demandais quelle est la bonne façon d'intégrer les plugins jQuery dans mon application angulaire. J'ai trouvé plusieurs tutoriels et captures d'écran, mais ils semblent adaptés à un plugin spécifique.

Par exemple: http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://www.youtube.com/watch?v=8ozyXwLzFYs

Dois-je créer une directive comme ça -

App.directive('directiveName', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName));
        }
    };
});

Et puis dans le html appeler le script et la directive?

<div directiveName ></div>
<script type="text/javascript" src="pluginName.js"></script>

Merci d'avance

jquery-plugins angularjs

— Gidon
source

oui, la meilleure approche consiste à envelopper les plugins jQuery requis dans une directive, afin que vous puissiez bénéficier des variables de portée et contrôler l'invocation de l'initialisation / méthode.

— Bhaskara Kempaiah

Je ne sais pas ce que je ressens à propos de l'évaluation en toute circonstance ... j'ai entendu sa mauvaise pratique

— sksallaj

Cela devrait être $(element).pluginActivationFunction(scope.$eval(attrs.directiveName));sans les guillemets.

— Maxim Zubarev

Réponses:

143

Oui vous avez raison. Si vous utilisez un plugin jQuery, ne placez pas le code dans le contrôleur. Créez plutôt une directive et placez le code que vous auriez normalement dans la linkfonction de la directive.

Il y a quelques points dans la documentation que vous pouvez consulter. Vous pouvez les trouver ici:
pièges communs

Utiliser correctement les contrôleurs

Assurez-vous que lorsque vous faites référence au script dans votre vue, vous le faites en dernier - une fois que la bibliothèque angularjs, les contrôleurs, les services et les filtres sont référencés.

EDIT: Plutôt que d'utiliser $(element), vous pouvez utiliser angular.element(element)lorsque vous utilisez AngularJS avec jQuery

— callmekatootie
source

Que diriez-vous des paramètres des plugins jQuery qui autorisent le contenu HTML? (par exemple si je veux ajouter une ng-clickdirective via ce paramètre HTML en texte brut)

— Fractaliste

@Fractaliste Je ne sais pas ce que tu veux dire. Pouvez-vous donner un exemple?

— callmekatootie

pouvez-vous expliquer ce que fait exactement tout $ (element). 'pluginActivationFunction' (scope. $ eval (attrs.directiveName)); veux dire ?

— Gaurav_soni

Je suis presque un débutant total d'angularjs. J'ai essayé d'utiliser plusieurs plugins jquery et aucun d'entre eux n'a fonctionné. Avons-nous vraiment besoin de faire cela? Ne peuvent-ils pas simplement travailler le long des angularjs? Cela me semble tellement passe-partout.

— Moebius

Pourquoi le script doit-il venir en dernier?

— Mike R

j'ai déjà 2 situations où les directives et les services / usines n'ont pas bien joué.

le scénario est que j'ai (eu) une directive qui a l'injection de dépendances d'un service, et à partir de la directive je demande au service de faire un appel ajax (avec $ http).

à la fin, dans les deux cas, la répétition ng n'a pas du tout été déposée, même lorsque j'ai donné au tableau une valeur initiale.

j'ai même essayé de faire une directive avec un contrôleur et une portée isolée

seulement quand j'ai tout déplacé vers un contrôleur et que cela a fonctionné comme par magie.

exemple à ce sujet ici Initialisation du plugin jQuery (RoyalSlider) dans Angular JS

— bresleveloper
source