menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:09_directivas:04_ejemploseguro [2014/08/29 19:59] admin [9.4 Ejemplo de directiva] |
unidades:09_directivas:04_ejemploseguro [2014/09/07 09:45] (actual) admin |
||
|---|---|---|---|
| Línea 3: | Línea 3: | ||
| Para que funciona el Datepicker es necesario añadir lo siguiente a la página ''index.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 | ||
| * JavaScript de JQuery UI | * JavaScript de JQuery UI | ||
| - | * CSS de JQuery UI | ||
| <sxh html> | <sxh html> | ||
| Línea 31: | Línea 31: | ||
| <sxh js;highlight: [3,6,7]> | <sxh js;highlight: [3,6,7]> | ||
| app.directive('caDatepicker', [function(dateFormat) { | app.directive('caDatepicker', [function(dateFormat) { | ||
| - | return { | + | return { |
| - | restrict: 'A', | + | restrict: 'A', |
| - | link: function($scope, element, attributes) { | + | link: function($scope, element, attributes) { |
| - | + | ||
| - | element.datepicker({ | + | element.datepicker({ |
| - | dateFormat: attributes.caDatepicker | + | dateFormat: attributes.caDatepicker |
| - | }); | + | }); |
| - | } | + | } |
| - | }; | + | }; |
| - | }]); | + | }]); |
| </sxh> | </sxh> | ||
| * Línea 3: Decimos que solo se puede usar como Atributo HTML | * Línea 3: Decimos que solo se puede usar como Atributo HTML | ||
| Línea 81: | Línea 81: | ||
| * Linea 8: Añadimos la función de //callback// del evento ''onSelect'' | * 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''. | * 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 ===== | ===== Ejemplo ===== | ||
| {{url>http://embed.plnkr.co/euC4cS}} | {{url>http://embed.plnkr.co/euC4cS}} | ||
| + | |||
| + | ===== Referencias ===== | ||
| + | * [[http://api.jqueryui.com/datepicker|Datepicker]] | ||
