Diferencias

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

--- unidades:09_directivas:04_ejemploseguro [2014/08/29 17:38] – creado admin
+++ unidades:09_directivas:04_ejemploseguro [2014/09/07 09:45] (actual) – admin
@@ Línea 1: / Línea 1: @@
 ====== 9.4 Ejemplo de directiva ======
+En este tema retornamos el ejemplo del seguro médico para añadir una directiva. La directiva consiste en usar el widget de [[http://jqueryui.com/datepicker/|Datepicker]] de [[http://jqueryui.com/|JQuery UI]] para que aparezca un calendario al pinchar sobre el campo "fechaCreacion" en la página ''detalle.html''.
+Para que funciona el Datepicker es necesario añadir lo siguiente a la página ''index.html'':
+  * CSS de JQuery UI
+  * JavaScript de JQuery
+  * JavaScript de JQuery UI
+<sxh html>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
+</sxh>
+La directiva se llamara "caDatepciker" y se usará como un atributo HTML. El valor del atributo será el formato de fecha que queremos que tenga el Datepicker según los formatos de fecha definidos por [[http://api.jqueryui.com/datepicker/#utility-formatDate|$.datepicker.formatDate]].
+Por lo tanto la directiva se usará de la siguiente manera:
+<sxh html;highlight: [6]>
+<input
+    id="fechaCreacion"
+    name="fechaCreacion"
+    type="text"
+    ng-model="seguro.fechaCreacion"
+    ca-datepicker="dd/mm/yy"
+/>
+</sxh>
+  * Línea 6: Usamos la directiva y especificamos que el datepicker use el formato de "dd/mm/yy"
+Veamos ahora como es la definición de la directiva:
+<sxh js;highlight: [3,6,7]>
+app.directive('caDatepicker', [function(dateFormat) {
+  return {
+    restrict: 'A',
+    link: function($scope, element, attributes) {
+      element.datepicker({
+        dateFormat: attributes.caDatepicker
+      });
+    }
+  };
+}]);
+</sxh>
+  * Línea 3: Decimos que solo se puede usar como Atributo HTML
+  * Línea 6: En la función de link llamamos a la función de JQuery UI para que transforme el ''<input>'' en un Datepicker. El método ''datepicker()'' acepta como argumento un objeto de configuración.
+  * Línea 7: Al objeto de configuración del método ''datepicker()'' le pasamos la propiedad ''dateFormat'' con el formato de fecha, sacando dicho formato del valor del atributo de la propia directiva: ''attributes.caDatepicker''
+Si usáramos la directiva veríamos que aparentemente funciona pero si añadiéramos el siguiente código HTML a la página:
+<sxh html>
+{{seguro.fechaCreacion}}
+</sxh>
+comprobaríamos que al cambiar la fecha con el ratón pinchando en el datepick no se cambia el texto de la expresión ''%%{%%{seguro.fechaCreacion%%}%%}''.
+**¿Que ha pasado?**
+Que AngularJS no se ha enterado que le han cambiado el dato dentro de ''<input>'' ya que ha sido un evento externo a él así que la propiedad ''$scope.seguro.fechaCreacion'' no se ha modificado.
+La solución a esto la tenemos en el propio datepicker que provee de un evento que se activa cuando él cambia la fecha. Este evento se llama [[http://api.jqueryui.com/datepicker/#option-onSelect|onSelect]].
+Para poder usar el evento [[http://api.jqueryui.com/datepicker/#option-onSelect|onSelect]] solo tenemos que añadir un nueva nueva propiedad llamada ''onSelect'' con una función que se llamará cuando se cambie la fecha. En esa función el objeto ''this'' hace referencia al propio tag ''<input>''. Dentro de esa función solo tendremos que lanzar el evento ''onChange'' de que algo ha cambiado en el ''<input>'' y AngularJS ya se enterará.
+La directiva ahora queda de la siguiente forma:
+<sxh js;highlight: [8,9]>
+app.directive('caDatepicker', [function(dateFormat) {
+  return {
+    restrict: 'A',
+    link: function($scope, element, attributes) {
+      element.datepicker({
+        dateFormat: attributes.caDatepicker,
+        onSelect: function() {
+          $(this).trigger('change');
+        }
+      });
+    }
+  };
+}]);
+</sxh>
+  * Linea 8: Añadimos la función de //callback// del evento ''onSelect''
+  * Línea 9: Lanzamos un evento de ''onChange'' en el ''<input>'' para que AngularJS sepa que algo ha cambiado y actualice consecuentemente la propiedad ''$scope.seguro.fechaCreacion''.
+<note important>
+La directiva realmente está sin acabar ya que también debería de transformar el dato de tipo String del ''<input>'' en un objeto ''Date'' cuando se guarda en ''$scope.seguro.fechaCreacion''. Es decir que ''$scope.seguro.fechaCreacion'' debería ser de tipo Date en vez de tipo String.
+Eso ya lo veremos en la unidad [[unidades:13_formulariosadv:00_start]].
+</note>
+===== Ejemplo =====
+{{url>http://embed.plnkr.co/euC4cS}}
+===== Referencias =====
+  * [[http://api.jqueryui.com/datepicker|Datepicker]]