====== 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 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'':
$scope.estilo={
color:"#FF0000",
backgroundColor:'yellow'
}
y a un tag HTML le ponemos lo siguiente:
Este es un texto con colores dinámicos
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:
style="color:#FF0000;background-color:yellow"
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 '''' para modificar desde la propia página los colores:
Escribe el color del texto (formato HTML):
Escribe el color del fondo (formato HTML):
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. :-)
====== Ejemplo ======
Escribe el color del texto (formato HTML):
Escribe el color del fondo (formato HTML):
Este es un texto con colores dinámicos
* Linea 14: Se indica la propiedad del ''$scope'' que tiene los estilos CSS del elemento
var app = angular.module("app", []);
app.controller("PruebaController", function($scope) {
$scope.estilo={
color:"#FF0000",
backgroundColor:'yellow'
}
});
* Linea 4: Se define la propiedad del ''$scope'' con los estilos CSS
{{url>http://embed.plnkr.co/Ggeuo9}}
====== Referencias ======
* [[https://docs.angularjs.org/api/ng/directive/ngStyle|ng-style]]