Diferencias

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

--- unidades:01_introduccion:directivas:start [2013/09/10 23:31] – Page moved from unidades:directivas:unidades:01_introduccion:start to unidades:01_introduccion:directivas:start admin
+++ unidades:01_introduccion:directivas:start [2014/07/14 18:24] (actual) – borrado admin
@@ Línea 1: / Línea 1: @@
-====== Directivas ======
-Las directivas son simplemente atributos que añadimos a nuestros tag HTML. Estos atributos no son estándar de HTML sino atributos específicos de AngularJS.
-Un ejemplo de directiva es ''ng-show'', esta directiva nos permite especificar cuándo se muestra un tag HTML.
-Cambiemos ahora el modelo añadiendo los campos ''alergico'' y ''nombreAlergia''
-<sxh js>
-function MiPageController($scope) {
-  var datos={
-    nombre:"Rafel Lorenzo",
-    ape1:"González",
-    ape2:"Aznar",
-    alergico:false,
-    nombreAlergia:null
-  };
-  $scope.seguro=datos;
-}
-</sxh>
-E incluyamos los campos correspondientes en el HTML
-<sxh html>
-<body ng-controller="MiPageController" >
-  Nombre:{{unidades:directivas:seguro.nombre}}<br />
-  Primer apellido:{{unidades:directivas:seguro.ape1}}<br />
-  Segundo apellido:{{unidades:directivas:seguro.ape2}}<br />
-  <br />
-  <br />
-   Nombre:<input type="text" ng-model="seguro.nombre" ><br/>
-   Primer apellido:<input type="text" ng-model="seguro.ape1" ><br/>
-   Segundo apellido:<input type="text" ng-model="seguro.ape2" ><br/>
-   Alergico:<input type="checkbox" ng-model="seguro.alergico"><br />
-   <div ng-show="seguro.alergico==true" >
-       Nombre Alergia:<input type="text" ng-model="seguro.nombreAlergia" >
-   </div>
-</body>
-</sxh>
-En la línea 10 hemos añadido un checkbox con la propiedad ''seguro.alergico''. También en las líneas 11-13 se ha añadido un ''<div>'' con el nombre de la alergia.
-Lo importante es la línea 11 con la directiva ''ng-show="seguro.alergico==true"'' con ella indicamos que el ''<div>'' sólo sea visible si la persona es alérgica.
-¡¡¡Lo importante es que sólo estamos tratando con el modelo, sin preocuparnos de si el ''input'' está o no marcado.!!!
-**Demo**
-{{url>http://jsfiddle.net/logongas/FBWdc/embedded/result,js,html}}
-====== enlaces ======
-  * http://docs.angularjs.org/guide/directive