Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

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 =====
  
unidades/09_directivas/01_introduccion.1409245131.txt.gz · Última modificación: 2014/08/28 18:58 (editor externo)
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