AngularJS tips: ng-if versus ng-show
El hombre es el único animal que tropieza dos veces con la misma piedra, y en mi caso lo puedo hacer incluso 5 ó 6 veces, por eso quiero escribir esta entrada acerca del uso de las directivas ng-if y ng-show (y por extensión de ng-hide) de AngularJS.
Pero primero lo primero, veamos que hacen estas dos directivas en un breve ejemplo de código.
Si ejecutas este código en tu navegador verás que tan sólo aparece un input en pantalla y que el resto de código HTML no se muestra. Esto se debe al uso de las directivas ng-if y ng-show que tienen precisamente esa finalidad, ocultar elementos mientras la evaluación de sus condiciones no se cumplan. En este caso cuando escribimos la palabra "test" en el input, ambos elementos se harán visibles instantáneamente.
Pero en este código hay más de lo que parece. Si te fijas en el bloque script al final del body, verás que hay una función asociada al evento onclick de los elementos ocultos. Y si haces click en cada uno de los divs comprobarás como, en la mayoría de los casos, sólo funciona para el bloque asociado a la directiva ng-show.
¿Y a qué se debe esto? Te preguntarás si no has trabajado un poco con AngularJS.
Pues muy sencillo, lo que hace Angular cuando aplicas la directiva ng-show es ocultar el elemento haciendo uso de una propiedad CSS, por lo que el elemento sigue existiendo en el DOM aunque no lo veamos. Pero en el caso de ng-if elimina el elemento del DOM hasta que se vuelve a cumplir la condición.
Si como es mi caso, haces uso de alguna librería que no está gestionada con Angular, debes tener cuidado con cual de ambas directivas debes utilizar. Recuerda, con ng-show ocultarás el elemento pero seguirá estando disponible en el DOM si quieres hacer algo con él (como hacer el bind de una función), pero con ng-if el elemento no estará presente en el DOM si necesitas hacer alguna operación con él.
El problema
Pero primero lo primero, veamos que hacen estas dos directivas en un breve ejemplo de código.
Si ejecutas este código en tu navegador verás que tan sólo aparece un input en pantalla y que el resto de código HTML no se muestra. Esto se debe al uso de las directivas ng-if y ng-show que tienen precisamente esa finalidad, ocultar elementos mientras la evaluación de sus condiciones no se cumplan. En este caso cuando escribimos la palabra "test" en el input, ambos elementos se harán visibles instantáneamente.
Pero en este código hay más de lo que parece. Si te fijas en el bloque script al final del body, verás que hay una función asociada al evento onclick de los elementos ocultos. Y si haces click en cada uno de los divs comprobarás como, en la mayoría de los casos, sólo funciona para el bloque asociado a la directiva ng-show.
El uso correcto de cada directiva
¿Y a qué se debe esto? Te preguntarás si no has trabajado un poco con AngularJS.
Pues muy sencillo, lo que hace Angular cuando aplicas la directiva ng-show es ocultar el elemento haciendo uso de una propiedad CSS, por lo que el elemento sigue existiendo en el DOM aunque no lo veamos. Pero en el caso de ng-if elimina el elemento del DOM hasta que se vuelve a cumplir la condición.
Si como es mi caso, haces uso de alguna librería que no está gestionada con Angular, debes tener cuidado con cual de ambas directivas debes utilizar. Recuerda, con ng-show ocultarás el elemento pero seguirá estando disponible en el DOM si quieres hacer algo con él (como hacer el bind de una función), pero con ng-if el elemento no estará presente en el DOM si necesitas hacer alguna operación con él.
Comentarios