sábado, 20 de junio de 2015

Crear una directiva angular con una galeria jQuery

Nunca modifiques el DOM desde el controlador, usa directivas, es lo que dicen los chicos del equipo de Angular JS. Hoy vamos a tratar de hacerles un poco de caso, por eso en este post vamos a intentar explicar de manera sencilla como crear una directiva haciendo uso de un plugin de galería creado con jQuery.

Algunas veces se necesita usar un plugin de jQuery con angular, pero de repente no sabemos como hacerlo cuando no estamos tan familiarizados con las directivas de angular. Que usaremos:

Primero creamos la estructura html (código completo al final):

Luego creamos nuestro modulo, nuestro controlador y nuestra directiva:


Nuestra directiva ahora es capaz de mostrar la galería (de momento no pongas atención a la variable del controlador images, la usaremos luego). Veamos algunos aspectos importantes de la directiva:

  • restrict: 'A': 'restringe' la directiva para solo usarse como un atributo, por eso el html en que se llama la directiva es: <div simple-cycle></div>. Podemos hacer que la directiva tambien sea un elemento agregando la letra 'E'. Para mas información ver Creating Custom Directives.
  • replace: true: indica que el template de la directiva sustituirá el elemento en que se definió la directiva, en este caso el <div>. Para mas información ver la sección de $compile (Nota: replace esta deprecated porque sera removido en la version 2 de angular).
  • template: 'nuestro template': lo que queremos que la directiva muestre como html.
  • link: es la funcion que se ejecuta cuando luego que el elemento y el template de la directiva se ha creado en el DOM. Aqui colocamos nuestra instancia del cycle.
Hasta ahora nuestra directiva crea nuestro plugin, pero no es tan robusta, supongamos que queremos que nuestra directiva sea capaz de crear una galería a partir de una serie de imágenes que tengamos en nuestro controlador, mmmm estas recordando la variable images ??? para eso crearemos otra directiva:


Ahora podemos observar lo siguiente:

  • scope: {pics: '=' } le indicamos a la directiva que tenga un scope aislado del controlador 'Ctrl', y que por medio de un atributo pics le enviaremos una variable que sera un arreglo de imágenes.
  • template: nuestro template ahora contiene un ngRepeat y un ngSrc.
    • ng-repeat="item in pics": iteramos la variable pics (arreglo) y almacenamos cada elemento en una variable item.
    • ng-src="{{item.url}}": recordemos que nuestra variable images del controlador 'Ctrl' contiene objetos con una propiedad url.
  • $timeout: lo inyectamos en la directiva para esperar 300 milisegundos y crear la instancia del plugin. Este tiempo es necesario para esperar que el ngRepeat cree todos los elementos <img> del template.

Ahora modificamos nuestro html para agregar nuestra nueva directiva:



Notemos ahora que por medio del atributo pics 'pasamos' nuestra variable del controlador images y ya la podemos utilizar desde la directiva. Excelente ahora nuestra directiva es dinamica!! :)

Pero.... quizás te preguntes 300 milisegundos es suficiente???? mi respuesta es: si y quizás no... SI, porque en este momento la directiva funciona xD es decir con pocas imágenes funciona pero con unas 1000, no estoy seguro (jamas he hecho la prueba) pero si entonces en este momento estas diciendo algo como: 'a este mae le pica el cheto.... no puede hacer eso porque en un momento no va a funcionar.... o con otro plugin que necesite mas datos se va a quebrar'. Tranquilo, te dejo otra opción, esperar a que el ultimo elemento del ngRepeat este creado para crear la instancia del plugin.

Entonces vamos de nuevo a modificar nuestra directiva:


Simplemente lo que hacemos es comprobar cuando el ngRepeat crea el ultimo elemento usando la variable $last (bool) y la directiva ngInit. La directiva ngInit llamara a nuestra función initFunction que sera la que realice la validación.

Eso es todo, espero que les ayude un poco, hasta la próxima, saludos.

Puedes ver el ejemplo completo en el siguiente plunkr.

NOTA: El post pretendía ser mucho mejor, pero blogger no lo pone fácil y crear un resaltado de sintaxis no me funciono, disculpas por un post de tan baja calidad, espero que el código en plunker pueda dejarlos mas claro. Hubiera querido ser mas claro desde el post pero lamentablemente no conseguí el resaltado de sintaxis.

No hay comentarios:

Publicar un comentario en la entrada