Ya hemos visto como manipular la información de nuestra app, grabamos nuevos registros, los actualizamos y los borramos, todo esto usando un API en JSON. En este tema vamos a iniciar a realizar una directiva para integrar un plugin en jQuery que nos permita utilizar un combo más amigable.

Para integrar plugins de jQuery necesitamos utilizar una directiva. Siempre que necesitemos tocar el DOM, ya sea para agregar eventos, agregar elementos, modificarlos o cualquier otra cosa, necesitamos utilizar una directiva.

Las directivas son muy útiles, pero es un poco complicado entender el concepto, es por eso que en este tema vamos a integrar un plugin hecho en jQuery, esto nos permitirá exponer los conceptos y enfrentarnos a los problemas reales, así podremos aprender a solucionarlos.

Lo primero que necesitamos es descargar el plugin desde la página oficial, luego agregamos el JavaScript y el CSS a nuestra app (index.html).

<link rel="stylesheet" type="text/css" href="css/bootstrap-select.css">
<script src="js/bootstrap-select.js"></script>

Una vez que lo hemos importado vamos a crear nuestra directiva de la siguiente manera (app.js).

.directive('bootstrapSelect',function(){ //Step 1

    return {
        require : 'ngModel',            //Step 2
        link: function (scope, element, attrs, ngModel) { //step 3
             console.log('My directive');
        }
    }
})

1. En el paso uno utilizamos el método directive para crear una directiva, aquí definimos el nombre de la directiva y la función encargada de crear la directiva.
2. En el segundo paso importamos la directiva ngModel, también podríamos utilizar un arreglo para requerir varias otras dependencias, el ngModel lo usaremos más adelante.
3. En el tercer paso definimos la función link, esta función será ejecutada cada que nuestra directiva sea creada, esto significa que cuando el template se esté compilando, esta función será llamada.

Los parámetros que recibe la función link son muy importantes, y hablaremos de ellos por separado más adelante. Para utilizar la directiva simplemente la agregamos en el template de la siguiente manera.

<select bootstrap-select="categories" ng-model="bookmark.category" class="form-control"></select>

Vamos a remplazar el select que ya teníamos en nuestro formulario y ahora usamos como atributo la directiva que hemos creado, además le pasaremos el arreglo que usará para crear las opciones del select.

Como se puede observar estamos usando un guión en el nombre de la directiva, Angular automáticamente buscará la directiva correcta. Por cada guión se utilizará una letra mayúscula en el nombre.

El scope

Cada directiva recibe un scope, si no definimos ninguno, automáticamente la directiva recibe el mismo scope del controlador que maneja el template desde donde fue utilizada esta directiva.

También podemos crear un nuevo scope específicamente para cada instancia de la directiva, en este ejemplo usaremos el scope principal, ya que necesitamos acceder a la colección de categorías de la siguiente manera.

scope.categories
scope.bookmarks
scope.currentCategory

Por defecto el scope es el mismo que el que estamos usando en el controlador, esto a nosotros nos funcionará para agregar al select las opciones cuando el servidor las entregue a nuestra app.

El element

El parámetro element corresponde al elemento sobre el que se está aplicando la directiva, en este caso será el select, este parámetro nos servirá para utilizar el plugin de jQuery de la siguiente manera.

$(element).selectpicker();

Dentro de la función link definimos el código anterior. Con esto veremos como el select que teniamos se transofrma en un nuevo componente. 

Directivas en Angular JS

Ya tenemos nuestra primera directiva funcionando! Solo nos falta llenar el combo de opciones, cuando se seleccione una opción necesitamos modificar el objeto category, también necesitamos actualizar el valor del combo cuando se edite un bookmark, entre otras cosas más. Mas adelante veremos como realizar todas estas operaciones.

Atributos

El tercer parámetro que recibe la función link son los atributos que han sido definidos en la directiva, en este caso necesitamos definir que propiedad de los objetos, que representan cada categoría, será el label y el value de cada option.

Vamos a modificar el markup del select de la siguiente manera.

<select bootstrap-select="categories" select-value="id" select-label="name" ng-model="bookmark.category" class="form-control"></select>

Aquí solamente agregamos los atributos select-value y select-label, estos atributos nos servirán para seleccionar que propiedades usaremos para desplegar los options. En la directiva los podemos acceder de la siguiente manera.

var collection = attrs.bootstrapSelect,
    valueProperty = attrs.selectValue,
    labelProperty = attrs.selectLabel,
    model = attrs.ngModel;

Y los vamos a usar más adelante, por el momento solamente los guardaremos en variables para accederlos rápidamente.  

Conclusiones

Hasta ahora hemos utilizado un plugin de jQuery desde una directiva, esto nos permitió remplazar el select tradicional por uno que utiliza estilos de bootstrap. Es importante entender los conceptos aquí expuestos, los parámetros scope, elemento y los atributos nos serán muy útiles para poder acceder a la información, configurar algunas opciones y manipular el DOM.

Por el momento hasta aquí llegaremos, en el siguiente tutorial vamos a llenar al select con opciones de manera dinámica. Si te ha gustado este tutorial puedes registrarte al sitio para recibir más tutoriales como este en tu correo.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!