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

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

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

¿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

@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

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