Índice

Ejemplos de directivas

Para ilustrar todas las nociones vistas en el capítulo y ver las distintas posibilidades ofrecidas por las directivas, se describen a continuación cuatro ejemplos de directivas que responden a distintas necesidades.

1. Integrar un componente jQuery

Cuando un componente que proviene de una librería externa a AngularJS se utiliza en una aplicación, la actitud correcta consiste en encapsular este componente en una directiva para poder integrarlo en la arquitectura de AngularJS.

El siguiente ejemplo describe cómo encapsular el componente jQuery DatePicker en una directiva AngularJS.

jQuery DatePicker

El componente DatePicker de jQuery permite seleccionar una fecha mediante un calendario.

images/C09EI31.png

Este componente se encuentra en la dirección: http://jqueryui.com/datepicker/

Para utilizarlo en una página HTML, es preciso agregar una referencia hacia los archivos JavaScript de jQuery y jQuery UI de la siguiente manera:

<script type="text/javascript"  
src="http://code.jquery.com/jquery-1.11.1.js"></script>  
<script type="text/javascript"  
src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

jQuery UI propone estilos por defecto. Para aprovecharlos, es necesario agregar la siguiente referencia en el archivo HTML:

<link rel="stylesheet"  
href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" />

Integrar jQuery DatePicker en una directiva

La idea consiste en poder ...