Muestra las diferencias entre dos versiones de la página.
unidades:09_directivas:01_introduccion [2014/08/28 18:58] admin [Creando una directiva] |
unidades:09_directivas:01_introduccion [2014/10/28 17:05] (actual) admin [Prefijos en Directivas] |
||
---|---|---|---|
Línea 33: | Línea 33: | ||
AngularJS permite ambas formas e incluso como clases CSS y como comentarios ((En Angular 1.2 ya no se permite)), pero es tan raro que mejor ni hablar de ellas. Así que a efectos prácticos una directiva se puede usar como: | AngularJS permite ambas formas e incluso como clases CSS y como comentarios ((En Angular 1.2 ya no se permite)), 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 | + | * Un atributo: Se pone como un atributo de un elemento HTML |
<sxh html> | <sxh html> | ||
<input ng-model="fechaNacimiento" ca-fecha> | <input ng-model="fechaNacimiento" ca-fecha> | ||
</sxh> | </sxh> | ||
- | * Un tag: Es directamente un nuevo tag pero tiene la desventaja que en versiones antiguas de Internet Explorer puede dar problemas | + | * Un Elemento o tag: Es directamente un nuevo elemento o tag pero tiene la desventaja que en versiones antiguas de Internet Explorer puede dar problemas |
<sxh html> | <sxh html> | ||
<ca-paginacion numero-paginas="10"></ca-paginacion> | <ca-paginacion numero-paginas="10"></ca-paginacion> | ||
Línea 43: | Línea 43: | ||
==== Prefijos en Directivas ==== | ==== 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 o con actuales o futuras etiquetas de HTML. 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". | + | El equipo de Angular recomienda que las directivas tengan siempre un prefijo de forma que no choquen con otras directivas creadas por otros desarrolladores o con actuales o futuras etiquetas de HTML. 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: | Ejemplos: | ||
* ''ng-view'' : Prefijo ''ng'' para indicar que es una directiva estándar de AngularJS | * ''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 | * ''ng-repeat'' : Prefijo ''ng'' para indicar que es una directiva estándar de AngularJS | ||
- | * ''ca-paginacion'' : Prefijo ''ca''para indicar que es una directiva creada en el Curso de AngularJS | + | * ''ca-paginacion'' : Prefijo ''ca'' para indicar que es una directiva creada en el Curso de AngularJS |
* Etc. | * Etc. | ||
Línea 98: | Línea 98: | ||
El método a usar del módulo es ''directive(nombre,funcionFactory)'' siendo: | El método a usar del módulo es ''directive(nombre,funcionFactory)'' siendo: | ||
* ''nombre'': El nombre de la directiva siguiendo el forma de los identificadores de JavaScript. | * ''nombre'': El nombre de la directiva siguiendo el forma de los identificadores de JavaScript. | ||
- | * ''funcionFactory'': Es una función que nos retorna un [[https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object|objeto con la definición de la directiva]] | + | * ''funcionFactory'': Es una función que nos retorna un [[https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object|objeto con la definición de la directiva]]. Como todas las funciones factory puede ser un array para poder inyectarle dependencias. |
El objeto con la definición de la directiva es el verdadero objeto que contiene toda la información de nuestra directiva y comprender todas sus propiedades implicaría saber todo sobre las directivas así que en esta unidad solo vamos a ver unas cuantas propiedades del [[https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object|objeto con la definición de la directiva]]. | El objeto con la definición de la directiva es el verdadero objeto que contiene toda la información de nuestra directiva y comprender todas sus propiedades implicaría saber todo sobre las directivas así que en esta unidad solo vamos a ver unas cuantas propiedades del [[https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object|objeto con la definición de la directiva]]. | ||
Línea 109: | Línea 109: | ||
String templateUrl | String templateUrl | ||
String restrict | String restrict | ||
+ | boolean replace | ||
boolean|Object scope | boolean|Object scope | ||
Function link | Function link | ||
Línea 116: | Línea 116: | ||
En este tema solo vamos a ver las siguientes propiedades: | En este tema solo vamos a ver las siguientes propiedades: | ||
- | * ''template'' : Es un String con el HTML por el que se substituira la directiva. | + | * ''template'' : Es un String con el HTML por el que se substituira la directiva. Si está esta propiedad no puede estar ''templateUrl'' ya que son excluyentes. |
- | * ''templateUrl'' : Es un String con una URL de un fichero que contiene el HTML por el que se substituira la directiva. | + | * ''templateUrl'' : Es un String con una URL de un fichero que contiene el HTML por el que se substituira la directiva. Si está esta propiedad no puede estar ''template'' ya que son excluyentes. |
* ''restrict'': Un String que indica como puede usarse la directiva si como atributo o como elemento | * ''restrict'': Un String que indica como puede usarse la directiva si como atributo o como elemento | ||
* Si vale "E" solo se podrá usar como elemento | * Si vale "E" solo se podrá usar como elemento | ||
* Si vale "A" solo podrá usarse como atributo | * Si vale "A" solo podrá usarse como atributo | ||
- | * Si vale "EA" o "AE" se podrá usar como elemento y como atributo. | + | * Si vale "EA" o "AE" se podrá usar como elemento y como atributo. Este es el funcionamiento por defecto si no se pone nada en la propiedad ''restrict''. |
+ | * ''replace'' : Si vale ''false'' el contenido del //template// se añadirá dentro del tag de la propia directiva. Pero si vale ''true'' se quitará el tag de la directiva y solo estará el contenido del //template//. | ||
+ | <note>En los 2 temas siguientes veremos las propiedades ''link'' y ''scope''.</note> | ||
+ | ==== Ejemplo ==== | ||
+ | Vamos a hacer nuestra primera directiva llamada "acTitulo" que simplemente muestre el texto "Hola Mundo" como título ''<h1>''. | ||
+ | |||
+ | <sxh js;highlight: [1,3,4,5,6,9]> | ||
+ | app.directive("acTitulo",[function() { | ||
+ | | ||
+ | var directiveDefinitionObject ={ | ||
+ | restrict:"E", | ||
+ | replace : true, | ||
+ | template:"<h1>Hola Mundo</h1>" | ||
+ | } | ||
+ | | ||
+ | return directiveDefinitionObject; | ||
+ | }]); | ||
+ | </sxh> | ||
+ | * Línea 1: Creamos la directiva de nombre "acTitulo" y como segundo parámetro está la función factory. | ||
+ | * Línea 3: Creamos el objeto ''directiveDefinitionObject'' que contendrá la definición de la directiva | ||
+ | * Línea 4: Al valer la propiedad ''replace'' el valor de ''true'' se eliminará de la página el tag de la propia directiva y solo estará el contenido del //template//. | ||
+ | * Línea 5: Indicamos mediante la propiedad ''restrict'' que el elemento solo puede ser un elemento o tag y no pude estar como atributo de otro elemento o tag. | ||
+ | * Línea 8: Retornamos el objeto con la definición de la directiva. | ||
+ | |||
+ | |||
+ | Usaremos la directiva de la siguiente forma: | ||
+ | <sxh html> | ||
+ | <ac-titulo></ac-titulo> | ||
+ | </sxh> | ||
+ | |||
+ | Y la directiva generará el siguiente HTML | ||
+ | <sxh html> | ||
+ | <h1>Hola Mundo</h1> | ||
+ | </sxh> | ||
+ | |||
+ | Si el valor de ''replace'' hubiera sido ''false'' se hubiera generado el siguiente HTML: | ||
+ | <sxh html> | ||
+ | <ac-titulo> | ||
+ | <h1>Hola Mundo</h1> | ||
+ | </ac-titulo> | ||
+ | </sxh> | ||
+ | <note tip>Por último destacar que el template solo puede tener un tag raiz , si queremos que la directiva tenga varios tags //hernamos// deberemos ponerlos todos dentro de un nuevo tag</note> | ||
===== Ejemplo ===== | ===== Ejemplo ===== | ||