AngularJS – ng-if o ng-hide/ng-show

noviembre 24, 2014

ng-if, ng-hide y ng-show nos sirven para mostrar u ocultar algún elemento de nuestra interfaz, pero lo hacen de forma diferente.

ng-if remueve el elemento del DOM, mientras que ng-hide o ng-show sólo lo ocultan mediante atributos HTML. En AngularJS esta diferencia es importante ya que además de esto, el primero crea un nuevo scope y los otros no. Esto quiere decir que para utilizar las variables de nuestro scope principal tenemos que hacerlo a través del atributo $parent o utilizando un objeto para almacenar nuestras variables, ya que al hacerlo así el mecanismo de js buscaría la propiedad en el scope actual y si no la encuentra la buscaría en el padre.

usando $parent

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="$parent.data">
</div>

utilizando un objeto

<input type="text" ng-model="data.input">
<div ng-if="true">
    <input type="text" ng-model="data.input">
</div>

Fuentes:
http://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng-show-ng-hide

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: