Muestra las diferencias entre dos versiones de la página.
unidades:11_rootscope:01_watch [2014/10/24 15:39] admin [$watchGroup] |
unidades:11_rootscope:01_watch [2014/10/25 10:26] (actual) admin [La importancia de $watch] |
||
---|---|---|---|
Línea 36: | Línea 36: | ||
* Línea 11: Ya hemos comprobado que los valores son distintos y ahora que cuando //hacemos// lo que necesitemos hacer. En nuestro ejemplo es simplemente mostrar un ''alert''. | * Línea 11: Ya hemos comprobado que los valores son distintos y ahora que cuando //hacemos// lo que necesitemos hacer. En nuestro ejemplo es simplemente mostrar un ''alert''. | ||
* Líneas 14 y 15: Si llamáramos a la función ''change'' desde un ''ng-click'' o desde donde queramos , como cambia el valor de la propiedad ''nombre'' se ejecutará la función de //callback// del ''$watch''. | * Líneas 14 y 15: Si llamáramos a la función ''change'' desde un ''ng-click'' o desde donde queramos , como cambia el valor de la propiedad ''nombre'' se ejecutará la función de //callback// del ''$watch''. | ||
- | |||
- | ===== La importancia de $watch ===== | ||
- | Como vemos es muy sencillo el uso de ''$watch''. Pero , ¿porque es tan importante ''$watch''? Hasta ahora hemos podido hacer cosas similares usando los eventos ''onClick'' o ''onChange'' ¿Que tiene de diferente? Pues la diferencia es que ya no estamos monitorizando cambios en la vista por ejemplo mediante ''onChange'' sino que directamente monitorizamos el propio modelo, eso hace que separemos aun mas la vista del modelo, lo que ayuda a seguir el patrón MVC. | ||
- | |||
- | Si lo que realmente queremos es saber cuando ha cambiado el valor de una propiedad de **modelo**, ¿Porque usar el evento ''onChange'' para comprobar sise ha modificado? ¿Que ocurre si modificamos la vista? Hay que recordar poner siempre ese ''onChange'' y por otro lado y si cambiamos directamente desde JavaScript el valor haciendo una asignación a la propiedad. Con ''onChange'' no lo podríamos detectar. Es decir que ''$watch'' es mucho mas útil que los eventos del DOM ya que nos permite detectar siempre el cambio independientemente desde donde se haya producido. | ||
<note tip> | <note tip> | ||
Línea 48: | Línea 43: | ||
} | } | ||
</sxh> | </sxh> | ||
+ | </note> | ||
+ | |||
+ | ===== La importancia de $watch ===== | ||
+ | Como vemos es muy sencillo el uso de ''$watch''. Pero , ¿porque es tan importante ''$watch''? Hasta ahora hemos podido hacer cosas similares usando los eventos ''onClick'' o ''onChange'' ¿Que tiene de diferente? Pues la diferencia es que ya no estamos monitorizando cambios en la vista por ejemplo mediante ''onChange'' sino que directamente monitorizamos el propio modelo, eso hace que separemos aun mas la vista del modelo, lo que ayuda a seguir el patrón MVC. | ||
+ | |||
+ | Si lo que realmente queremos es saber cuando ha cambiado el valor de una propiedad de **modelo**, ¿Porque usar el evento ''onChange'' para comprobar sise ha modificado? ¿Que ocurre si modificamos la vista? Hay que recordar poner siempre ese ''onChange'' y por otro lado y si cambiamos directamente desde JavaScript el valor haciendo una asignación a la propiedad. Con ''onChange'' no lo podríamos detectar. Es decir que ''$watch'' es mucho mas útil que los eventos del DOM ya que nos permite detectar siempre el cambio independientemente desde donde se haya producido. | ||
+ | |||
+ | <note important> | ||
+ | Siempre que puedas utiliza ''$watch'' en vez de eventos de los tag HTML como ''onChange'' , etc, ya que así estará mas separado el modelo de la vista. | ||
</note> | </note> | ||
===== Comparando el objeto ===== | ===== Comparando el objeto ===== | ||
Línea 269: | Línea 273: | ||
De esa forma solo hay un ''$watch'' en vez de dos. Esto tiene un problema ya que en aunque solo hay un ''$watch'' y mejoramos el rendimiento, hay condiciones que harán que no funcione correctamente. Veamos un ejemplo en el que no funcionaría: | De esa forma solo hay un ''$watch'' en vez de dos. Esto tiene un problema ya que en aunque solo hay un ''$watch'' y mejoramos el rendimiento, hay condiciones que harán que no funcione correctamente. Veamos un ejemplo en el que no funcionaría: | ||
- | <sxh js;highlight: [6]> | + | <sxh js;highlight: [6,14]> |
app.controller("PruebaController", function($scope) { | app.controller("PruebaController", function($scope) { | ||
Línea 292: | Línea 296: | ||
</sxh> | </sxh> | ||
+ | * Línea 6: Se monitorizan las propiedades "a" y "b" mediante la expresión ''a + b'' | ||
+ | * Línea 14: Se modifican las 2 propiedades a la vez. | ||
+ | En este caso nunca se llamará a la función de //callback// ya que el antiguo valor de la expresión es 6 al ser la suma de 5 + 1 ((a + b = 5 + 1 = 6)), pero el nuevo valor también es 6 al ser la suma de 6 + 0 ((a + b = 6 + 0 = 6)) , por lo que nunca se detectará el cambio en estos casos. Es decir que la expresión "''a + b''" significa monitorizar la **SUMA** de "''a''" y "''b''" por lo que si dicha suma no cambia nunca se ejecuta la función de //callback//. | ||
===== Ejemplo ===== | ===== Ejemplo ===== | ||
+ | |||
+ | Ejemplo simple del método ''$watch'' | ||
{{url>http://embed.plnkr.co/PbLgt2}} | {{url>http://embed.plnkr.co/PbLgt2}} | ||
===== Referencias ===== | ===== Referencias ===== | ||
- | * [[https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch|/ API Reference / ng / type components in ng / $rootScope.Scope / $watch]] | + | * [[https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch|/ API Reference / ng / type components in ng / $rootScope.Scope / $watch]] |
+ | * [[https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchCollection|/ API Reference / ng / type components in ng / $rootScope.Scope / $watchCollection]] | ||
+ | * [[https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchGroup|/ API Reference / ng / type components in ng / $rootScope.Scope / $watchGroup]] |