Diferencias

Muestra las diferencias entre dos versiones de la página.

--- unidades:04_masdirectivas:06_ngif [2014/08/29 12:17]
admin [Referencias]
+++ unidades:04_masdirectivas:06_ngif [2014/08/29 22:58] (actual)
admin
@@ Línea 1: / Línea 1: @@
 ====== 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 [[unidades:02_angular:06_ngshow|ng-show]] o [[unidades:02_angular:07_nghide|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.
+La directiva ''ng-if'' nos permite que exista o no un tag en la página. Podríamos pensar que es similar a [[unidades:02_angular:06_ngshow|ng-show]] o [[unidades:02_angular:07_nghide|ng-hide]], pero éstas últimas directivas simplemente los ocultan mediante CSS mientras que ''ng-if'' los elimina del DOM o los vuelve a añadir.
-Esta 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.
+Esta 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. Ésto realmente tiene una importancia enorme ya que implica saber cómo 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.
+En el ejemplo prueba a escribir algo en el nombre y en el apellido. Verás cómo el apellido sí se modifica en las 2 líneas  pero el nombre **no** se modifica en uno de los casos.
 {{url>http://embed.plnkr.co/H0O8Jn1DnwsbpFnOb8Pk}}
-¿Que hay distinto en los 2 ejemplos? Simplemente que en el modelo del apellido hay un punto y en el del nombre no.
+¿Qué hay distinto en los 2 ejemplos? Simplemente que en el modelo del apellido hay un punto y en el del nombre, no.
 <sxh html;title:index.html;highlight: [16,18,27,29]>
@@ Línea 78: / Línea 78: @@
 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 heredado todos los valores que había en el ''$scope'' del controlador.
+Voy a volver a recordar que dentro de una directiva ''ng-if'' se crea un nuevo ''$scope'' que hereda de nuestro ''$scope'' del controlador. Ésto 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 heredado todos los valores que había en el ''$scope'' del controlador.
 ===== Herencia de $scope =====
-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 ocurrirá que tendremos 2 propiedades distintas que tienen ahora 2 valores independiente.
+Lo importante ahora es comprender cómo 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 tendremos 2 propiedades distintas que tienen ahora 2 valores independientes.
 <uml>
@@ Línea 101: / Línea 101: @@
 </uml>
-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.
+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. Ahora bien, 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 ya que ambos apuntan al mismo objeto, por lo tanto un cambio en la propiedad ''modelo.apellido'' del ''$scope'' del ''ng-if'' **SI** 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 ya que ambas apuntan al mismo objeto, por lo tanto un cambio en la propiedad ''modelo.apellido'' del ''$scope'' del ''ng-if'' **SI** modifica el ''$scope'' del controlador.
 De todo ésto se deduce que siempre deberían estar nuestras propiedades dentro de objetos y por eso la frase:
@@ Línea 114: / Línea 114: @@
 <note warning>
-Espero que todo ésto se haya comprendido porque es uno de los mayores motivos de errores en AngularJS
+Espero que todo ésto se haya comprendido porque es uno de los mayores motivos de errores en AngularJS.
 </note>
 <note tip>
-Realmente el modelo de objetos que hemos presentado en el diagrama UML ahí no corresponde exactamente con la realidad ya que no se hace copia del valor en el ''$scope'' del ''ng-if'' hasta que no se cambia el valor , mientras tanto sigue apuntando al ''$scope'' del controlador mediante la cadena de prototipos de JavaScript.
+Realmente el modelo de objetos que hemos presentado en el diagrama UML ahí no se corresponde exactamente con la realidad ya que no se hace copia del valor en el ''$scope'' del ''ng-if'' hasta que no se cambia el valor. Mientras tanto sigue apuntando al ''$scope'' del controlador mediante la cadena de prototipos de JavaScript.
-Esto último implica que si primero se hace un cambio en la propiedad ''nombre'' del ''$scope'' del controlador si que se vería reflejada en la propiedad ''nombre'' del ''$scope'' del ''ng-if''. Pero una vez se modifica la propiedad ''nombre'' del ''$scope'' del ''ng-if'' ya se hacen independientes.
+Ésto último implica que si primero se hace un cambio en la propiedad ''nombre'' del ''$scope'' del controlador sí que se vería reflejada en la propiedad ''nombre'' del ''$scope'' del ''ng-if''. Pero una vez se modifica la propiedad ''nombre'' del ''$scope'' del ''ng-if'' ya se hacen independientes.
 Cambia el ejemplo de esta forma y mira a ver lo que ocurre cuando primero cambias un input u otro del nombre.

unidades/04_masdirectivas/06_ngif.txt · Última modificación: 2014/08/29 22:58 por admin

Ir hasta arriba