Herramientas de usuario

Herramientas del sitio


unidades:04_masdirectivas:09_ngstyle

Diferencias

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

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
unidades:04_masdirectivas:09_ngstyle [2014/07/31 22:19] – [4.9 ng-style] adminunidades:04_masdirectivas:09_ngstyle [2014/08/29 23:07] (actual) – admin
Línea 1: Línea 1:
 ====== 4.9 ng-style ====== ====== 4.9 ng-style ======
-Esta directiva permite modificar el estilo CSS de un tag pero definiendo el estilo como un objeto del ''$scope''. Dicho objeto tendrá propiedades cuyo nombre de la propiedad será el nombre del estilo CSS y el valor de la propiedad será el valor del estilo CSS.+Esta directiva permite modificar el estilo CSS de un tag pero definiendo el estilo como un objeto del ''$scope''. Dicho objeto tendrá propiedades cuyo nombre será el nombre del estilo CSS y el valor de la propiedad será el valor del estilo CSS.
  
 Es decir que si creamos el siguiente objeto JavaScript en el ''$scope'': Es decir que si creamos el siguiente objeto JavaScript en el ''$scope'':
Línea 10: Línea 10:
 </sxh> </sxh>
  
-Y a un tag HTML le ponemos lo siguiente:+y a un tag HTML le ponemos lo siguiente:
 <sxh html> <sxh html>
 <div ng-style="estilo"  >Este es un texto con colores dinámicos</div> <div ng-style="estilo"  >Este es un texto con colores dinámicos</div>
 </sxh> </sxh>
  
-Siendo ''estilo'' el nombre de la propiedad del ''$scope'' que tiene el objeto JavaScript con las propiedades CSS.+siendo ''estilo'' el nombre de la propiedad del ''$scope'' que tiene el objeto JavaScript con las propiedades CSS
  
 Se le pondrá al div el estilo siguiente: Se le pondrá al div el estilo siguiente:
   style="color:#FF0000;background-color:yellow"   style="color:#FF0000;background-color:yellow"
  
-Pero ahora todo esto tiene una ventaja. Al ser valores del ''$scope'' los podemos modificar desde AngularJS y automáticamente se modificará el estilo CSS.+Pero ahora todo ésto tiene una ventaja. Al ser valores del ''$scope'' los podemos modificar desde AngularJS y automáticamente se modificará el estilo CSS.
  
 Ahora podemos añadir los siguientes tags ''<input>'' para modificar desde la propia página los colores: Ahora podemos añadir los siguientes tags ''<input>'' para modificar desde la propia página los colores:
Línea 29: Línea 29:
  
 <note tip> <note tip>
-Personalmente me sigue sorprendiendo lo fácil que es hacer modificaciones en el DOM solamente modificando información desde JavaScript. En este caso ha sido el estilo CSS, pero con ''ng-if'' , ''ng-repeat'' , ''ng-options'' o la siguiente qiue vamos a ver [[unidades:04_masdirectivas:10_ngclass|ng-class]] también es muy sencillo hacer modificaciones en el DOM. +Personalmente me sigue sorprendiendo lo fácil que es hacer modificaciones en el DOM solamente modificando información desde JavaScript. En este caso ha sido el estilo CSS, pero con ''ng-if'' , ''ng-repeat'' , ''ng-options'' o la siguiente que vamos a ver [[unidades:04_masdirectivas:10_ngclass|ng-class]] también es muy sencillo hacer modificaciones en el DOM. 
  
 Con herramientas así usar jQuery para modificar el DOM parece cosa del siglo pasado. :-) Con herramientas así usar jQuery para modificar el DOM parece cosa del siglo pasado. :-)
unidades/04_masdirectivas/09_ngstyle.1406837961.txt.gz · Última modificación: por admin