AngularJS - ¿Que son las directivas? - ¿Qué significa "compilar" una plantilla HTML? - Búsqueda de directivas - Normalizacion de las directivas - Tipos de directivas - Texto y atributos del binding

Hola siguiendo con nuestro curso de angular hoy vamos a ver las directivas.

AngularJS - ¿Que son las directivas?

Mirando por arriba, las directivas son marcadores en un elemento DOM (como puede ser un atributo, el nombre de un elemento, comentario o clase CSS) que avisan al compilador HTML de angular ($compile) que se agregar un comportamiento especifico para ese elemento del DOM o incluso transformando el elemento DOM y sus hijos.

AngularJS ya viene con conjunto de estas directivas ya incorporadas, como ng-Bind,ng-Model y ng-Class. Al igual que se crean controladores y servicios, nosotros podemos crear nuestras propias directivas para utilizarlas en AngularJS.

 Cuando se ejecuta una aplicación que trabaja con Angular, existe un "HTML Compiler" (Compilador HTML) que se encarga de recorrer el documento y localizar las directivas que hayas colocado dentro del código HTML, para ejecutar aquellos comportamientos asociados a esas directivas.

AngularJS - ¿Qué significa "compilar" una plantilla HTML? 

Para AngularJS, "compilación" significa agregar listener (escuchadores) de eventos al HTML para que sea interactivo. La razón por la que utilizamos el término "compilar" es que el proceso recursivo de las directivas que fijan refleja el proceso de compilar el código fuente en lenguajes de programación compilados.

AngularJS - Búsqueda de directivas

Antes que podamos escribir una directiva, tenemos que saber como AngularJS compila el HTML y determina cuando usar un directiva.

En el siguiente ejemplo mostraremos como podemos escribir para directiva ngModel para que sea encontrada:

<input ng-model="nombre">

O también la podemos escribir de esta manera:

<input data-ng:model="nombre">

AngularJS - Normalizacion de las directivas

AngularJS normaliza las etiquetas de los elementos y el nombre de los atributos para determinar con que elementos van cada directiva. Cuando tipicamente nos referimos a las directivas por el nombre normalizado case-sensitive camelCase (ejemplo: ngModel). Sin embargo, en el HTML no es case sensitive, entonces nos referiremos a las directivas en el DOM por usar en forma de lower-case, usando tipicamente la barra delimitadora (-) en los atributos de los elementos del DOM, ejemplo ng-model .

El proceso de normalizacion es el siguiente:

Agrega "x-" y "data-" en el frente del elemento o atributo.

Agrega en el medio del camelcase el ":,-,_" .

Ejemplos con las directivas :

<div ng-controller="Controller">
  Hello <input ng-model='nombre'> <hr/>
  <span ng-bind="nombre"></span> <br/>
  <span ng:bind="nombre"></span> <br/>
  <span ng_bind="nombre"></span> <br/>
  <span data-ng-bind="nombre"></span> <br/>
  <span x-ng-bind="nombre"></span> <br/>
</div>

Nota: Preferiblemente usar el delimitador "-" (ejemplo ng-bind para ngBind). Si quieres usar una herramienta de validación HTML, puedes usar en cambio del prefijo "data-" (ejemplo data-ng-bind para ngBind). Las formas que mostramos arriba también son aceptadas pero ya son viejas, algunas deberías evitarlas. 

AngularJS - Tipos de directivas

El $compile puede encontrar las directivas basadas en el nombre del elemento, atributo, nombre de la clase, como también en comentarios.

Todas las directivas que AngularJS provee se pueden encontrar en el nombre de un atributo, en el nombre de la etiqueta, en los comentarios o nombre de las clases. 

Ejemplo utilizando la directiva my-dir:

<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>

Nota: Preferiblemente debemos utilizar las directivas en el nombre de la etiqueta atributos en ves de los comentarios y nombre de clases (aunque podamos!). Asiendo que esto va a ser mas fácil de determinar que directiva se encuentra en el elemento.

Nota: Preferiblemente Las directivas comentadas son usadas comúnmente donde la API DOM es limitada por la habilidad de crear directivas que generar multiples elementos (ejemplo dentro de una etiqueta <table>). AngularJS 1.2 introduce la directiva n-g-repeat-star y ng-repeat-end como una mejor soluciona este problema. Los desarrolladores deberían asegurarse de usas esta directiva sobre los comentarios cuando sea posible.

AngularJS - Texto y atributos del binding

Hace muy poco hablamos del binding si no te acordas podes darte una vuelta por acá!. Durante el proceso de compilación el compilador busca el texto y los atributos utilizando el servicio $interpolate para ver si contiene una expresión embebida. Estas expresiones son registradas como relojes y actualizadas como parte del ciclo normal del $digest.

Un ejemplo de interpolación se muestra a continuación:

<a ng-href="img/{{nombreUsuario}}.jpg">Hello {{nombreUsuario}}!</a>

Binding del atributo ngAttr

El navegador web toma algunos valores que considera validos para los atributos, como por ejemplo:

<svg>
  <circle cx="{{cx}}"></circle>
</svg>

Esperamos que AngularJS este listo para bindear esto, pero cuando checkeamos en consola vemos algo como esto:

"Error: Invalid value for attribute cx="{{cx}}"

Ya que las restricciones del SVG API DOM, no pueden simplemente escribir cx="{{cx}}".

Si escribíamos "ng-attr-cx" podemos solucionar este problema.

Si el atributo que bindeamos es prefijado con el prefijo ngAttr (desnormalizado como ng-attr-) entonces durante el binding, este aplicara para correspondiente atributo sin prefijo. Esto permite bindear atributos que de otra manera no serán entendidos por el navegador (ejemplo un atributo del elemento SVG del circle[cx]). Cuando usas un ngAttr, la bandera de allOrNothing del $interpolate es usada, entonces cadena interpolada resulta como indefinida, el atributo es sacado y no se agrega al elemento.

Ejemplo:

<svg>
  <circle ng-attr-cx="{{cx}}"></circle>
</svg>

Si uno quiere modificar el atributo llevado a camelcase (elementos SVG tiene que validar el atributo llevado a camelcase) como es un viewBox en el elemento SVG, se puede utilizar guiones bajos para marcar que el atributo a bindear fue llevado a camelcase.

Ejemplo:

<svg ng-attr-view_box="{{viewBox}}">
</svg>

Bueno esperamos que esta introducción a las directivas, se haya entendido un poco mas adelante continuaremos con las directivas personalizadas!