Diferencias

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

--- unidades:09_directivas:03_link [2014/08/29 17:15] – [9.3 Funcion Link] admin
+++ 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:
@@ Línea 58: / Línea 58: @@
 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>
-===== Ejemplo =====
+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}}
@@ Línea 65: / Línea 86: @@
 ===== 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]]