Forma correcta de integrar complementos jQuery en AngularJS

217

Me preguntaba cuál es la forma correcta de integrar complementos jQuery en mi aplicación angular. He encontrado varios tutoriales y lanzamientos de pantalla, pero parecen estar dirigidos a un complemento específico.

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

¿Debo crear una directiva como esta? 

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

¿Y luego en el html llamar al script y la directiva?

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

Gracias por delante

jquery-plugins angularjs Gidon
fuente
44
sí, el mejor enfoque es envolver los complementos de jQuery requeridos dentro de una directiva, de modo que obtenga el beneficio de las variables de alcance y controle la inicialización / invocación del método.
Bhaskara Kempaiah
No sé cómo me siento acerca de eval en ninguna circunstancia ... escuché que es una mala práctica
sksallaj
1
Debería estar $(element).pluginActivationFunction(scope.$eval(attrs.directiveName));sin las comillas.
Maxim Zubarev

Respuestas:

143

Sí, estás en lo correcto. Si está utilizando un complemento jQuery, no coloque el código en el controlador. En su lugar, cree una directiva y coloque el código que normalmente tendría dentro de la linkfunción de la directiva.

Hay un par de puntos en la documentación que puede consultar. Puedes encontrarlos aquí:
Errores comunes

Usar los controladores correctamente

Asegúrese de que cuando hace referencia al script en su vista, lo haga en último lugar, después de hacer referencia a la biblioteca angularjs, los controladores, los servicios y los filtros.

EDITAR: en lugar de usar $(element), puede usar angular.element(element)cuando usa AngularJS con jQuery

callmekatootie
fuente
1
¿Qué hay de los parámetros de los complementos jQuery que permiten el contenido HTML? (por ejemplo, si quiero agregar una ng-clickdirectiva a través de este parámetro HTML de texto plano)
Fractaliste
1
@Fractaliste No estoy seguro de lo que quieres decir. ¿Puede dar un ejemplo?
callmekatootie
¿puede explicar qué hace exactamente todo $ (elemento). 'pluginActivationFunction' (alcance. $ eval (attrs.directiveName)); significa?
Gaurav_soni
Soy casi un novato total de angularjs. Traté de usar varios complementos de jquery y ninguno de ellos funcionó. ¿Realmente necesitamos hacer esto? ¿No pueden simplemente trabajar a lo largo de angularjs? A mí me suena tan repetitivo.
Moebius
¿Por qué el script debe ser el último?
Mike R
0

Ya tengo 2 situaciones en las que las directivas y servicios / fábricas no funcionaron bien.

El escenario es que tengo (tuve) una directiva que tiene inyección de dependencia de un servicio, y desde la directiva le pido al servicio que realice una llamada ajax (con $ http).

Al final, en ambos casos, el ng-Repeat no se presentó en absoluto, incluso cuando le di a la matriz un valor inicial.

incluso intenté hacer una directiva con un controlador y un alcance aislado

solo cuando moví todo a un controlador y funcionó como magia.

ejemplo sobre esto aquí Inicializando el complemento jQuery (RoyalSlider) en Angular JS

bresleveloper
fuente