Las directivas de Angular: Manejar expresiones

AngularJS ofrece una gran variedad de directivas pero, no podría mostrar todas y cada una de ellas por ello voy a centrarme en las más importantes. En esta ocasión voy a mostrar cómo funcionan las directivas para manejar expresiones ngBind y ngCloak.

Directiva ngBind

Esta directiva lo que hace es recoger una expresión y devolver un valor, exactamente igual como haríamos con los doble corchetes. Por ejemplo, tenemos un span con una suma

Eso sería equivalente exactamente a esto: {{5+5}}

Tanto ngBind como la sintaxis de expresión piden a AngularJS mostrar el valor de una expresión dada y actualizar la salida por pantalla cuando el valor de esa expresión cambia.

Por que usar ngBind cuando tenemos las expresiones? Si la carga de un documento se demora un poco, se vería en HTML las diferentes expresiones al usuario final. Es decir, un usuario podría ver el {{5+5}} momentáneamente antes de que Angular empiece a compilar. Si usamos ngBind podemos manejar expresiones y no tener que pasar por ese efecto.

Directiva ngCloak

Si tu documento tarda en cargar, y notas ciertos problemas con las expresiones que aparecen, puedes usar ngCloak en vez de ngBind. La directiva funciona de la siguiente manera

Como ves basta con escribir la directiva si necesidad de especificar un valor. Esta expresión lo que hace es esconder elemento aplicando CSS de esa manera, sólo se muestra oculto hasta que AngularJS determina que puede mostrar el valor evaluado.

Seguramente estés pensando en añadir la directiva al body para que aplique a todos los elementos su efecto pero, eso no es a menudo una buena idea. De esta manera evitarías que el navegadores rendericen la página progresivamente. Por tanto, es buena idea que apliques esta directiva a los elementos de manera individual.

Y hasta aquí directivas relacionadas a manejar expresiones, espero que os haya gustado. A seguir picando 🙂