¡Esta es una revisión vieja del documento!


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 Datepicker de 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:

  • JavaScript de JQuery
  • JavaScript de JQuery UI
  • CSS de JQuery UI

    <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>

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 $.datepicker.formatDate.

Por lo tanto la directiva se usará de la siguiente manera:

<input 
    id="fechaCreacion" 
    name="fechaCreacion" 
    type="text" 
    ng-model="seguro.fechaCreacion" 
    ca-datepicker="dd/mm/yy" 
/>

  • 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:

app.directive('caDatepicker', [function(dateFormat) {
        return {
            restrict: 'A',
            link: function($scope, element, attributes) {

                element.datepicker({
                    dateFormat: attributes.caDatepicker
                });
            }
        };
    }]);

Ejemplo

unidades/09_directivas/04_ejemploseguro.1409333984.txt.gz · Última modificación: 2014/08/29 19:39 (editor externo)
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0