menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:09_directivas:01_introduccion [2014/08/28 19:30] admin [Creando una directiva] |
unidades:09_directivas:01_introduccion [2014/10/28 17:05] (actual) admin [Prefijos en Directivas] |
||
|---|---|---|---|
| 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 121: | Línea 121: | ||
| * 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//. | * ''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> | <note>En los 2 temas siguientes veremos las propiedades ''link'' y ''scope''.</note> | ||
| ==== Ejemplo ==== | ==== Ejemplo ==== | ||
| - | Vamos a hacer nuestra primera directiva llamada "acEjem1" que simplemente muestre el texto "Hola Mundo" como título ''<h1>''. | + | 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]> | <sxh js;highlight: [1,3,4,5,6,9]> | ||
| - | app.directive("acEjem1",[function() { | + | app.directive("acTitulo",[function() { |
| | | ||
| var directiveDefinitionObject ={ | var directiveDefinitionObject ={ | ||
| Línea 140: | Línea 140: | ||
| }]); | }]); | ||
| </sxh> | </sxh> | ||
| - | * Línea 1: Creamos la directiva de nombre "acEjem1" y como segundo parámetro está la función factory. | + | * 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 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 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 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 149: | Línea 149: | ||
| Usaremos la directiva de la siguiente forma: | Usaremos la directiva de la siguiente forma: | ||
| <sxh html> | <sxh html> | ||
| - | <ac-ejem1></ac-ejem1> | + | <ac-titulo></ac-titulo> |
| </sxh> | </sxh> | ||
| - | Y generaremos el siguiente HTML | + | Y la directiva generará el siguiente HTML |
| <sxh html> | <sxh html> | ||
| <h1>Hola Mundo</h1> | <h1>Hola Mundo</h1> | ||
| Línea 159: | Línea 159: | ||
| Si el valor de ''replace'' hubiera sido ''false'' se hubiera generado el siguiente HTML: | Si el valor de ''replace'' hubiera sido ''false'' se hubiera generado el siguiente HTML: | ||
| <sxh html> | <sxh html> | ||
| - | <ac-ejem1> | + | <ac-titulo> |
| <h1>Hola Mundo</h1> | <h1>Hola Mundo</h1> | ||
| - | </ac-ejem1> | + | </ac-titulo> |
| </sxh> | </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 ===== | ||
