4.6 ng-if

La directiva ng-if nos permite que exista o no un tag en la página. Podríamos pensar que es similar a ng-show o ng-hide, pero éstas últimas directivas simplemente los ocultan mediante CSS mientras que ng-if lo elimina del DOM o lo vuelve a añadir.

Est
a directiva no debería tener mucho que explicar pero realmente tiene un detalle que la hace muy importante. Crea un nuevo $scope heredando de nuestro $scope del controlador. Esto realmente tiene una importancia enorme ya que implica saber como funciona la herencia de $scope en JavaScript y AngularJS.

Vamos a ver primeramente un ejemplo y comprobaremos que hay algo que funciona mal.

En el ejemplo prueba a escribir algo en el nombre y en el apellido. Veras como el apellido si que se modifica en las 2 líneas pero el nombre no se modifica en uno de los casos.

¿Que hay distinto en los 2 ejemplos? Simplemente que en el modelo del apellido hay un punto y en el del nombre no. ¿Recuerdas la advertencia del tema 2.4 Formulario. Decía lo siguiente:

Si el valor de tu directiva ng-model no incluye un punto es que está mal

Ahora vamos a explicar del motivo de esta advertancia.

Voy a volver a recordar que dentro de una directiva ng-if se crea un nuevo $scope que hereda de nuestro $scope del controlador. Esto significa que cuando estamos poniendo los tag <input> con el ng-model. El nombre de la propiedad a la que hace referencia no es a nuestro $scope de nuestro controlador sino al nuevo $scope que hay dentro del ng-if. Lo bueno de todo ello es que el nuevo $scope que hay dentro del ng-if ha copiado todos los valores que había en el $scope del controlador.

Lo importante ahora es comprender como se ha hecho dicha herencia. Es algo tan chapuza que lo que hace es copiar simplemente el valor de todas las propiedades. El problema es que si una propiedad NO es un puntero a un objeto , resulta que tenemos 2 propiedades distintas que tienen ahora 2 valores independiente.

Fíjate en el diagrama UML de objetos que se ha creado. Ahora cada $scope tiene las propiedades repetidas pero si esa propiedad apuntaba a un objeto, en ambos casos se apunta al mismo objeto pero si la propiedad no era un objeto , en cada $scope cada propiedad es independiente.

Es decir que la propiedad nombre del $scope del ng-if es distinta de la propiedad nombre del $scope del controlador , por lo tanto un cambio en la propiedad nombre del $scope del ng-if no modifica el $scope del controlador.

Sin embargo la propiedad modelo.apellido del $scope del ng-if es la misma que la propiedad modelo.apellido del $scope del controlador , por lo tanto un cambio en la propiedad modelo.apellido del $scope del ng-if SI modifica el $scope del controlador ya que ambos apuntan al mismo objeto.

de todo ésto se deduce que siempre deberían estar nuestras propiedades dentro de objetos y por eso la frase: