Modo corretto per integrare i plugin jQuery in AngularJS

217

Mi chiedevo quale sia il modo corretto di integrare i plugin jQuery nella mia app angolare. Ho trovato diversi tutorial e screen-cast ma sembrano adatti a un plug-in specifico.

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

Devo creare una direttiva in questo modo -

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

E poi nel codice HTML chiama lo script e la direttiva?

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

Grazie in anticipo

jquery-plugins angularjs

— Gidon
fonte

Sì, l'approccio migliore è racchiudere i plugin jQuery richiesti all'interno di una direttiva, in modo da ottenere il vantaggio delle variabili dell'ambito e controllare l'inizializzazione / l'invocazione del metodo.

— Bhaskara Kempaiah,

Non so cosa provo per l'eval in qualsiasi circostanza ... ho sentito che è solo una brutta pratica

— sksallaj

Dovrebbe essere $(element).pluginActivationFunction(scope.$eval(attrs.directiveName));senza virgolette.

— Maxim Zubarev,

Risposte:

143

Sì hai ragione. Se si utilizza un plug-in jQuery, non inserire il codice nel controller. Crea invece una direttiva e inserisci il codice che normalmente avresti all'interno della linkfunzione della direttiva.

Ci sono un paio di punti nella documentazione che potresti dare un'occhiata. Puoi trovarli qui:
insidie comuni

Utilizzo corretto dei controller

Assicurarsi che quando si fa riferimento allo script nella propria vista, lo si fa riferimento per ultimo, dopo aver fatto riferimento alla libreria angularjs, ai controller, ai servizi e ai filtri.

EDIT: anziché utilizzare $(element), è possibile utilizzare angular.element(element)quando si utilizza AngularJS con jQuery

— callmekatootie
fonte

Che ne dici dei parametri dei plugin jQuery che consentono il contenuto HTML? (ad esempio se voglio aggiungere una ng-clickdirettiva tramite questo parametro HTML in testo semplice)

— Fractaliste

@Fractaliste Non sei sicuro di cosa intendi. Puoi fare un esempio?

— callmekatootie,

puoi spiegare cosa fa esattamente tutto $ (element). 'pluginActivationFunction' (scope. $ eval (attrs.directiveName)); si intende ?

— Gaurav_soni

Sono quasi un principiante assoluto di angularjs. Ho provato a usare diversi plugin jquery e nessuno di loro ha funzionato. Dobbiamo davvero farlo? Non possono semplicemente lavorare con angularjs? Mi sembra così divertente.

— Moebius,

Perché la sceneggiatura deve arrivare per ultima?

— Mike R,

ho alreay 2 situazioni in cui direttive e servizi / fabbriche non hanno funzionato bene.

lo scenario è che ho (avuto) una direttiva che ha l'iniezione di dipendenza di un servizio, e dalla direttiva chiedo al servizio di effettuare una chiamata Ajax (con $ http).

alla fine, in entrambi i casi ng-Repeat non ha archiviato affatto, anche quando ho dato alla matrice un valore iniziale.

ho anche provato a fare una direttiva con un controller e un ambito isolato

solo quando ho spostato tutto su un controller e ha funzionato come per magia.

esempio su questo qui Inizializzazione del plugin jQuery (RoyalSlider) in Angular JS

— bresleveloper
fonte