angularjs - nghide - ngif angular 2 example

¿Cuál es la diferencia entre ng-if y ng-show/ng-hide (11)

Estoy tratando de entender la diferencia entre ng-if y ng-show / ng-hide , pero a mí me parecen iguales.

¿Hay alguna diferencia que deba tener en cuenta al elegir usar uno u otro?

ngIf

La directiva ngIf elimina o ngIf crear una parte del árbol DOM en función de una expresión. Si la expresión asignada a ngIf evalúa como un valor falso, entonces el elemento se elimina del DOM, de lo contrario, se reinserta en el DOM un clon del elemento.

 <div ng-if="1"></div>  <div ng-if="0"></div>

Cuando un elemento se elimina con ngIf se destruye su alcance y se crea un nuevo alcance cuando se restaura el elemento. El alcance creado dentro de ngIf hereda de su alcance principal usando herencia prototípica.

Si se utiliza ngIf dentro de ngIf para enlazar con una primitiva de JavaScript definida en el ámbito principal, cualquier modificación realizada en la variable dentro del ámbito secundario no afectará el valor en el ámbito primario, por ejemplo

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

Para solucionar esta situación y actualizar el modelo en el ámbito principal desde dentro del ámbito secundario, use un objeto:

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

O bien, $parent variable variable para hacer referencia al objeto de alcance principal:

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

ngShow

La directiva ngShow muestra u oculta el elemento HTML dado en función de la expresión proporcionada al atributo ngShow . El elemento se muestra u oculta al eliminar o agregar la clase de CSS ng-hide al elemento. La clase CSS .ng-hide está predefinida en AngularJS y establece el estilo de visualización en ninguno (usando una marca !important ).

 <div ng-show="1"></div>  <div ng-show="0" class="ng-hide"></div>

Cuando la expresión ngShow evalúa como false , la clase de CSS ng-hide se agrega al atributo de class en el elemento y se oculta. Cuando es true , la clase CSS ng-hide se elimina del elemento, lo que hace que el elemento no aparezca oculto.

ng-if if false eliminará elementos de DOM. Esto significa que todos sus eventos, directivas adjuntas a esos elementos se perderán. Por ejemplo, ng-click en uno de los elementos secundarios, cuando ng-if se evalúa como falso, ese elemento se eliminará de DOM y, nuevamente, cuando sea verdadero, se volverá a crear.
ng-show / ng-hide no elimina los elementos de DOM. Utiliza estilos CSS (.ng-hide) para ocultar / mostrar elementos. De esta manera, no se perderán las directivas que se adjuntaron a los niños.
ng-if crea un ámbito secundario, mientras que ng-show / ng-hide no lo hace.

@EdSpencer es correcto. Si tiene muchos elementos y usa ng-if para instanciar solo los relevantes, está ahorrando recursos. @CodeHater también es algo correcto, si va a eliminar y mostrar un elemento muy a menudo, ocultarlo en lugar de eliminarlo podría mejorar el rendimiento.

El principal caso de uso que encuentro para ng-if es que me permite validar y eliminar un elemento limpiamente si el contenido es ilegal. Por ejemplo, podría hacer referencia a una variable de nombre de imagen nula y eso generará un error, pero si ng-if y compruebo si es nulo, todo está bien. Si hiciera un ng-show, el error seguiría disparándose.

@Gajus Kuizinas y @CodeHater son correctos. Aquí sólo estoy dando un ejemplo. Mientras trabajamos con ng-if, si el valor asignado es falso, todos los elementos html se eliminarán de DOM. y si el valor asignado es verdadero, entonces los elementos html serán visibles en el DOM. Y el alcance será diferente en comparación con el alcance principal. Pero en el caso de ng-show, solo mostrará y ocultará los elementos según el valor asignado. Pero siempre permanece en el DOM. Solo la visibilidad cambia según el valor asignado.

http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview

Espero que este ejemplo te ayude a entender los ámbitos. Intente dar valores falsos a ng-show y ng-if y verifique el DOM en la consola. Intente ingresar los valores en los cuadros de entrada y observe la diferencia.

<!DOCTYPE html>

Hola Plunker!

<input type="text" ng-model="data"> <div ng-show="true"> <br/>ng-show=true :: <br/><input type="text" ng-model="data"> </div> <div ng-if="true"> <br/>ng-if=true :: <br/><input type="text" ng-model="data"> </div> {{data}}

A tener en cuenta, una cosa que me pasó ahora: ng-show esconde el contenido a través de css, sí, pero dio lugar a extraños fallos en los botones que se supone que son los divs.

Tenía una tarjeta con dos botones en la parte inferior y, dependiendo del estado real, uno se intercambia con un tercer botón de edición de ejemplo con una nueva entrada. Usando ng-show = false para ocultar el izquierdo (presente primero en el archivo) sucedió que el siguiente botón terminó con el borde derecho fuera de la tarjeta. ng-if arregla eso al no incluir el código en absoluto. (Solo marque aquí si hay algunas sorpresas ocultas usando ng-if en lugar de ng-show)

El hecho de que la directiva ng-if , a diferencia de ng-show , crea su propio alcance, lleva a una interesante diferencia práctica:

angular.module(''app'', []).controller(''ctrl'', function($scope){ $scope.delete = function(array, item){ array.splice(array.indexOf(item), 1); } })

En la primera lista, on-click evento de on-click , la variable show , desde el ámbito interno / propio , se cambia, pero ng-if está observando otra variable desde el ámbito externo con el mismo nombre, por lo que la solución no funciona. En el caso de ng-show tenemos la única variable show , por eso funciona. Para corregir el primer intento, deberíamos hacer referencia para show desde el ámbito principal / externo a través de $parent.show .

La directiva ng-if elimina el contenido de la página y ng-show/ng-hide utiliza la propiedad de display CSS para ocultar el contenido.

Esto es útil en caso de que quiera usar :first-child pseudo selectores de :first-child y :last-child pseudo :last-child para diseñar.

Tal vez un punto interesante para hacer, es la diferencia entre las prioridades entre ambos.

Por lo que puedo decir, la directiva ng-if tiene una de las prioridades más altas (si no la más alta) de todas las directivas angulares. Lo que significa: se ejecutará PRIMERO antes que todas las demás directivas de menor prioridad. El hecho de que se ejecute PRIMERO, significa que efectivamente, el elemento se elimina antes de que se procesen las directivas internas . O al menos: eso es lo que hago de ello.

Observé y utilicé esto en la interfaz de usuario que estoy creando para mi cliente actual. Toda la interfaz de usuario está bastante llena, y tenía ng-show y ng-hide por todas partes. No quiero entrar en demasiados detalles, pero construí un componente genérico, que podía administrarse usando la configuración JSON, así que tuve que hacer algunos cambios dentro de la plantilla. Hay una repetición ng presente, y dentro de la repetición ng, se muestra una tabla que tiene una gran cantidad de ng shows, ng-hides e incluso ng-switches presentes. Querían mostrar al menos 50 repeticiones en la lista, lo que daría lugar a que se resolvieran más o menos 1500-2000 directivas. Revisé el código, y el backend de Java + JS personalizado en el frente tomaría unos 150 ms para procesar los datos, y luego Angular lo masticaría unos 2-3 segundos antes de mostrarlos. El cliente no se quejó, pero me horroricé :-)

En mi búsqueda, tropecé con la directiva ng-if. Ahora, tal vez es mejor señalar que en el momento de concebir esta interfaz de usuario, no había ng, si está disponible. Debido a que ng-show y ng-hide tenían funciones en ellos, que devolvían valores booleanos, podía reemplazarlos fácilmente con ng-if. Al hacerlo, todas las directivas internas parecían ya no ser evaluadas. Eso significó que volví a aproximadamente un tercio de todas las directivas que se estaban evaluando y, por lo tanto, la IU se aceleró hasta aproximadamente 500 ms - tiempo de carga de 1 seg. (No tengo forma de determinar los segundos exactos)

Tenga en cuenta: el hecho de que las directivas no se evalúen, es una conjetura educada sobre lo que está sucediendo debajo.

Entonces, en mi opinión: si necesita que el elemento esté presente en la página (es decir, para verificar el elemento, o lo que sea), pero simplemente esté oculto, use ng-show / ng-hide. En todos los demás casos, use ng-if.

Una cosa importante a tener en cuenta acerca de ng-if y ng-show es que cuando se usan los controles de formulario, es mejor usar ng-if porque elimina completamente el elemento del dominio.

Esta diferencia es importante porque si crea un campo de entrada con required="true" y luego configura ng-show="false" para ocultarlo, Chrome emitirá el siguiente error cuando el usuario intente enviar el formulario:

An invalid form control with name='''' is not focusable.

La razón de ser el campo de entrada está presente y es required pero como está oculto, Chrome no puede concentrarse en él. Esto puede romper literalmente su código ya que este error detiene la ejecución del script. ¡Así que ten cuidado!

Una diferencia interesante en ng-if y ng-show es:

SEGURIDAD

Los elementos DOM presentes en el bloque ng-if no se representarán en caso de que su valor sea falso

donde, como en el caso de ng-show, el usuario puede abrir la ventana Inspeccionar elemento y establecer su valor en VERDADERO.

Y con un silbido, se muestran los contenidos enteros que estaban destinados a ocultarse, lo que es una violación de la seguridad. :)

ng-show y ng-hide funcionan de manera opuesta. Pero la diferencia entre ng-hide o ng-show con ng-if es, si usamos ng-if, entonces el elemento se creará en el dom pero con el elemento ng-hide / ng-show se ocultará completamente.

ng-show=true/ng-hide=false: Element will be displayed ng-show=false/ng-hide=true: element will be hidden ng-if =true element will be created ng-if= false element will be created in the dom.