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

Question

Je me demandais quelle était 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 ceci -

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

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

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

Merci d'avance

Answer 1

Oui, vous avez raison. Si vous utilisez un plugin jQuery, ne mettez pas le code dans le contrôleur. Créez plutôt une directive et placez le code que vous auriez normalement à l'intérieur de la directive link la fonction de la directive.

Il y a quelques points dans la documentation que vous pourriez examiner. Vous pouvez les trouver ici :
Pièges courants

Utiliser correctement les contrôleurs

Assurez-vous que lorsque vous référencez le script dans votre vue, vous le référencez en dernier - après avoir référencé la bibliothèque angularjs, les contrôleurs, les services et les filtres.

EDIT : Plutôt que d'utiliser $(element) vous pouvez utiliser angular.element(element) lors de l'utilisation d'AngularJS avec jQuery

Answer 2

J'ai déjà eu deux situations où les directives et les services/factories n'ont pas bien fonctionné.

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

en fin de compte, dans les deux cas, le ng-Repeat n'a pas du tout fonctionné, même lorsque j'ai donné une valeur initiale au tableau.

J'ai même essayé de faire une directive avec un contrôleur et un "isolated-scope".

seulement quand j'ai tout déplacé sur un contrôleur et ça a marché comme par magie.

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