Diferencias

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

--- unidades:09_directivas:03_link [2014/08/29 16:27]
admin creado
+++ unidades:09_directivas:03_link [2014/10/28 17:05] (actual)
admin
@@ Línea 1: / Línea 1: @@
 ====== 9.3 Funcion Link ======
-Hasta hora hemos visto como definir una la directiva de forma declarativa, es decir especificando como debe comportarse la directiva. Lo último que nos falta ver en esta unidad es añadir una función que se ejecutará al iniciarse la directiva. A esta función se le llama la función "link". Para definirla deberemos añadir dicha función a la propiedad ''link'' del [[https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object|objeto con la definición de la directiva]].
+Hasta hora hemos visto como definir una directiva de forma declarativa, es decir especificando como debe comportarse la directiva. Lo último que nos falta ver en esta unidad es añadir una función que se ejecutará al iniciarse la directiva. A esta función se le llama la función "link". Para definirla deberemos añadir dicha función a la propiedad ''link'' del [[https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object|objeto con la definición de la directiva]].
 La función link acepta 4 parámetros que son:
   * ''scope'': Es el ''scope'' de nuestra directiva
-  * ''iElement'': Es el elemento del DOM del contenido de nuestra directiva.
+  * ''iElement'': Es un [[https://docs.angularjs.org/api/ng/function/angular.element|elemento]] DOM del tag raiz del template. Está encapsulado como si fuera un elemento de jQuery llamado ''jqLite''
-  * ''iAttrs'' : Son todos los atributos "normalizados"
+  * ''iAttrs'' : Son todos los atributos de se han puesto en la directiva "normalizados" ((Normalizados significa que todas las letras se transforman a minúsculas excepto la letra posterior a cada guion que se transforma a mayúscula)).
-  * ''controller''
+  * ''controller'': Veremos esta función en la unidad [[unidades:12_directivasadv:00_start]]
-  * ''transcludeFn''
+  * ''transcludeFn'': Veremos esta función en la unidad [[unidades:12_directivasadv:00_start]]
+Vamos a modificar la directiva ''acTitulo'' del tema anterior haciendo que se pueda elegir el color , solo que vamos a permitir que se haga usando colores en castellano en vez de en inglés. Para ello vamos a tener que modificar la directiva para transformar el color de castellano al formato del color de HTML.
+Vamos a hacer que la directiva se pueda usar de la siguiente manera:
+<sxh html;highlight: [10,13,28]>
+app.directive("acTitulo",[function() {
+  var directiveDefinitionObject ={
+    restrict:"E",
+    replace : true,
+    template:"<h1>{{texto}}</h1>",
+    scope:{
+      texto:"@"
+    },
+    link:function(scope, iElement, iAttrs, controller, transcludeFn) {
+        var htmlColor;
+        switch (iAttrs.color) {
+            case "rojo":
+                htmlColor="#FF0000";
+                break;
+            case "verde":
+                htmlColor="#00FF00";
+                break;
+            case "azul":
+                htmlColor="#0000FF";
+                break;
+            default:
+                htmlColor="#000000";
+                break;
+        }
+        iElement.css("color",htmlColor);
+    }
+  }
+  return directiveDefinitionObject;
+}]);
+</sxh>
+  * Línea 10: Añadimos la nueva función link a la definición de la directiva
+  * Línea 13: De la lista de atributos de la directiva obtenemos el valor del atributo "color" mediante ''iAttrs.color''. Y según su valor ponemos el color HTML en hexadecimal. No lo hemos puesto en el ''scope'' de la directiva ya que no se usa en el template.
+  * Línea 28: Al objeto ''iElement'' que corresponde con el tag raiz de nuestra directiva, que en este caso es ''<h1>'' se cambiamos el estilo CSS poniendo el nuevo color.
+<note warning>
+Esta solución no es muy acertada ya que tiene el problema de que si hubiera estado enlazada a una propiedad del ''$scope'' del controlador , si se cambiara el valor de la propiedad del ''$scope'' del controlador no se modificaría el color del tag ''<h1>''.
+Una solución mejor hubiera sido en vez de usar la función link,  usar la directiva [[unidades:04_masdirectivas:07_ngswitch|ngSwitch]] directamente en el template.
+</note>
+En la función link podemos realizar muchas mas cosas como puede ser:
+  * Hacer transformaciones del DOM de la directiva usando jQuery
+  * Añadir manejadores de eventos de jQuery
+  * Etc.
+Es decir todas esas cosas que necesitamos hacer con jQuery ((o cualquiero troa librería de JavaScript que modifica el DOM)) porque no se pueden hacer directamente con AngularJS se hacen en la función de link.Por lo tanto en el controlador no se hacen modificaciones del DOM sino que si necesitamos hacer una modificación del DOM, creamos una directiva y dentro de ella , en la función link, hacemos todos los cambios que necesitemos.
+Por lo tanto las directivas también las podemos ver como nuestra forma de encapsular jQuery para que el resto de la aplicación solo vea directivas de AngularJS.
+<note important>
+En AngularJS existen 3 funciones muy parecidas llamadas:
+  * compile
+  * pre-link
+  * post-link
+Y es una fuente de confusión cuando usar cada una de ellas. En la unidad [[unidades:12_directivasadv:00_start]] veremos las 3 funciones.
+En este caso nuestra función "link" que hemos visto es realmente es la función "post-link".
+</note>
+===== Ejemplo =====
+Este ejemplo es simplemente la nueva directiva que acabamos de ver
+{{url>http://embed.plnkr.co/LnIR8H}}
+===== Referencias =====
+  * [[https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object|/ API Reference / ng / service / $compile / Directive Definition Object]]
+  * [[https://docs.angularjs.org/guide/directive|/ Developer Guide / Directives]]
+  * [[https://docs.angularjs.org/api/ng/function/angular.element|/ API Reference / ng / function / angular.element]]

unidades/09_directivas/03_link.1409322426.txt.gz · Última modificación: 2014/08/29 16:27 por admin

Ir hasta arriba