¡Esta es una revisión vieja del documento!


9.1 Introducción

Hasta ahora hemos usado las directivas de AngularJS , en esta unidad vamos a ver como crear nuestra propias directivas.

¿Cual es la utilidad de crear nuestras propias directivas? Pues es simplemente es poder crearte tus propias etiquetas HTML y poder hace cosas como:

  • Directiva para indicar que un input es para fechas y que salta el desplegable: ca-fecha

<input ng-model="fechaNacimiento" ca-fecha>

  • Directiva para hacer petañas: ca-tabs y ca-tab

<ca-tabs>
  <ca-tab nombre="Compras">
    Contenido de la segunda pesaña
  </ca-tab>
  <ca-tab nombre="Ventas">
    Contenido de la segunda pesaña
  </ca-tab>      
</ca-tabs>

  • Directiva para la paginación: ca-paginacion

<ca-paginacion numero-paginas="10"></ca-paginacion>

Etc. , etc.

Pasemos ahora a ver alguna característica de las directivas

Formas

Lo primero que hemos notado es que hemos usado una directiva como un atributo, como en ca-fecha pero también se puede hace como si fuera directamente un nuevo tag HTML , como en ca-paginacion.

AngularJS permite ambas formas e incluso como clases CSS y como comentarios 1), pero es tan raro que mejor ni hablar de ellas. Así que a efectos prácticos una directiva se puede usar como:

  • Un atributo: Se pone como un atributo de un tag

<input ng-model="fechaNacimiento" ca-fecha>

  • Un tag: Es directamente un nuevo tag pero tiene la desventaja que en versiones antiguas de Internet Explorer puede dar problemas

<ca-paginacion numero-paginas="10"></ca-paginacion>

Prefijos en Directivas

El equipo de Angular recomienda que las directivas tengan siempre un prefijo de forma que no choquen con otras directivas creadas pro otros desarrolladores. Por eso las directivas de AngularJS empiezan siempre por “ng”. En las directivas que creemos en este curso siempre empezaran por “ca” por “Curso de Angular”.

Ejemplos:

  • ng-view : Prefijo ng para indicar que es una directiva estándar de AngularJS
  • ng-repeat : Prefijo ng para indicar que es una directiva estándar de AngularJS
  • ca-paginacion : Prefijo capara indicar que es una directiva creada en el Curso de AngularJS
  • Etc.

Nombre

Hasta ahora hemos visto los nombres de las directivas con guiones para separar palabras.

Ej:

  • ng-repeat
  • ng-if
  • ca-paginacion
  • ca-tabs-vertical
  • Etc.

El nombre verdadero de las directivas cuando se definen realmente es el siguiente

Ej:

  • ng-repeatngRepeat
  • ng-ifngIf
  • ca-paginacioncaPaginacion
  • ca-tabs-verticalcaTabsVertical
  • Etc.

Es decir el nombre de las directivas sigue el formato de los identificadores en JavaScript.Y ese es el nombre que se usa en la documentación de AngularJS cuando se refieren a una directiva.

Variaciones del nombre en HTML

Dado el nombre de la directiva tal y como se ve en JavaScript se puede usar en la página HTML siguiendo las siguientes reglas:

  • Añadir el prefijo data- o x- para que los validadores HTML sepan que es una directiva propia nuestra.
  • Separar cada palabra con algunos de los siguientes caracteres ”-” , ”:” o “_”.

Por lo tanto la directiva ngView puede usarse en una página HTML con las siguientes formas:

  • ng-view
  • ng:view
  • ng_view
  • data-ng-view
  • data-ng:view
  • data-ng_view
  • x-ng-view
  • x-ng:view
  • x-ng_view

Aunque lo normal es restringirse solo a las siguientes formas.

  • ng-view
  • data-ng-view
1) En Angular 1.2 ya no se permite
unidades/09_directivas/01_introduccion.1409232063.txt.gz · Última modificación: 2014/08/28 15:21 por admin
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