Diferencias

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

--- unidades:04_masdirectivas:09_ngstyle [2014/07/31 21:32] – creado admin
+++ unidades:04_masdirectivas:09_ngstyle [2014/08/29 23:07] (actual) – admin
@@ Línea 1: / Línea 1: @@
 ====== 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'':
+<sxh js>
+  $scope.estilo={
+    color:"#FF0000",
+    backgroundColor:'yellow'
+  }
+</sxh>
+y a un tag HTML le ponemos lo siguiente:
+<sxh html>
+<div ng-style="estilo"  >Este es un texto con colores dinámicos</div>
+</sxh>
+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 ''<input>'' para modificar desde la propia página los colores:
+<sxh html>
+Escribe el color del texto (formato HTML):<input ng-model="estilo.color"  >
+Escribe el color del fondo (formato HTML):<input ng-model="estilo.backgroundColor"  >
+</sxh>
+<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 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. :-)
+</note>
 ====== Ejemplo ======
-{{url>http://embed.plnkr.co/}}
+<sxh html;title:index.html;highlight: [14]>
+<!DOCTYPE html>
+<html ng-app="app">
+<head>
+  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
+  <script src="script.js"></script>
+</head>
+<body ng-controller="PruebaController">
+  Escribe el color del texto (formato HTML):<input ng-model="estilo.color">
+  <br>
+  Escribe el color del fondo (formato HTML):<input ng-model="estilo.backgroundColor">
+  <br>
+  <br>
+  <div ng-style="estilo">Este es un texto con colores dinámicos</div>
+</body>
+</html>
+</sxh>
+  * Linea 14: Se indica la propiedad del ''$scope'' que tiene los estilos CSS del elemento
+<sxh js;title:script.js;highlight: [4,5,6,7]>
+var app = angular.module("app", []);
+app.controller("PruebaController", function($scope) {
+  $scope.estilo={
+    color:"#FF0000",
+    backgroundColor:'yellow'
+  }
+});
+</sxh>
+  * 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]]