Diferencia entre las funciones 'controlador', 'enlace' y 'compilación' al definir una directiva


393

Algunos lugares parecen usar la función del controlador para la lógica directiva y otros usan el enlace. El ejemplo de pestañas en la página de inicio angular usa el controlador para uno y el enlace para otra directiva. ¿Cuál es la diferencia entre los dos?


2
Quizás una descripción más completa de las funciones de las directivas: directivas angulares: cuándo utilizar compilación, controlador, preenlace y postenlace .
Izhaki

Respuestas:


635

Ampliaré un poco su pregunta y también incluiré la función de compilación.

  • función de compilación : se utiliza para la manipulación de plantillas DOM (es decir, la manipulación de tElement = elemento de plantilla), por lo tanto, las manipulaciones que se aplican a todos los clones DOM de la plantilla asociada con la directiva. (Si también necesita una función de enlace (o funciones de enlace pre y post), y definió una función de compilación, la función de compilación debe devolver las funciones de enlace porque el 'link'atributo se ignora si el 'compile'atributo está definido).

  • función de enlace : normalmente se utiliza para registrar devoluciones de llamadas de escucha (es decir, $watchexpresiones en el ámbito), así como para actualizar el DOM (es decir, la manipulación de iElement = elemento de instancia individual). Se ejecuta después de que la plantilla ha sido clonada. Por ejemplo, dentro de an <li ng-repeat...>, la función de enlace se ejecuta después de que la <li>plantilla (tElement) se haya clonado (en un iElement) para ese <li>elemento en particular . A $watchpermite que una directiva sea notificada de los cambios de propiedad del alcance (un alcance está asociado con cada instancia), lo que permite que la directiva represente un valor de instancia actualizado para el DOM.

  • función del controlador : debe usarse cuando otra directiva necesita interactuar con esta directiva. Por ejemplo, en la página de inicio de AngularJS, la directiva de panel necesita agregarse al alcance mantenido por la directiva de pestañas, por lo tanto, la directiva de pestañas necesita definir un método de controlador (API de pensamiento) al que la directiva de panel puede acceder / llamar.

    Para obtener una explicación más detallada de las pestañas y las directivas de panel, y por qué la directiva de pestañas crea una función en su controlador usando this(en lugar de en $scope), vea 'this' vs $ scope en los controladores AngularJS .

En general, puede poner métodos, $watchesetc. en el controlador de la directiva o en la función de enlace. El controlador se ejecutará primero, lo que a veces es importante (vea este violín que se registra cuando las funciones ctrl y link se ejecutan con dos directivas anidadas). Como Josh mencionó en un comentario , es posible que desee poner funciones de manipulación del alcance dentro de un controlador solo para mantener la coherencia con el resto del marco.


131
Esta explicación debe estar en los documentos principales de AngularJS o al menos en una referencia a ella
Dogoku el

77
Esta es una respuesta informativa, pero creo que es difícil de leer. Quizás más puntuación y oraciones más pequeñas pueden ayudar. En general estoy agradecido por la respuesta.
Marty Cortez

El compilador $ ignora el atributo 'enlace' en presencia de un atributo 'compilar'. Pero, ¿qué pasa en presencia de un atributo 'controlador'? ¿'Controller' hace que el compilador $ ignore uno o ambos atributos 'link' y 'compile'? ¿Es posible y / o aconsejable usar una 'compilación' junto con un 'controlador'?
Carl G

1
@CarlG, la presencia de un atributo de controlador no tiene efecto en el compilador $ con respecto al enlace y la compilación. Puedes usar compilación y controlador.
Mark Rajcok

1
Los "oyentes DOM" NO son "(es decir, expresiones $ watch en el ámbito)". Uno escucha al DOM para eventos como mouseover, el otro al alcance de los cambios de propiedad. Gran diferencia.
Dmitri Zaitsev

56

Como complemento a la respuesta de Mark, la función de compilación no tiene acceso al alcance, pero la función de enlace sí.

Realmente recomiendo este video; Writing Directives de Misko Hevery (el padre de AngularJS), donde describe las diferencias y algunas técnicas. (Diferencia entre la función de compilación y la función de enlace a las 14:41 marca en el video ).


3
+1 para el enlace al video. Es muy informativo.
Rob Kielty


35
  1. ejecutar el código antes de la compilación: use el controlador
  2. ejecutar el código después de la compilación: use el enlace

Convención angular: escriba la lógica de negocios en el controlador y la manipulación DOM en el enlace.

Además de esto, puede llamar a una función de controlador desde la función de enlace de otra directiva. Por ejemplo, tiene 3 directivas personalizadas

<animal>
<panther>
<leopard></leopard>
</panther> 
</animal>

y desea acceder a los animales desde el interior de la directiva "leopardo".

http://egghead.io/lessons/angularjs-directive-communication será útil para conocer la comunicación inter-directiva


18
"código de ejecución antes de la compilación: use el controlador". Esto es incorrecto; compilesiempre se ejecutará antes controller .
Izhaki

No podrá (al menos no de manera directa) acceder a los animales desde su directiva de leopardo. Las directivas secundarias pueden acceder a los métodos de controlador en una directiva principal, pero las directivas entre hermanos (como en el ejemplo anterior) no pueden llamarse mutuamente a los controladores.
Benjamin White

2
¿Son los leopardos realmente un tipo de pantera? Además, en una nota al margen ... ¿Puede tener un enlace - Y - un controlador en una directiva?
Cody

1
Sí, los leopardos / jaguares son panteras. y sí, tienes un enlace y un controlador dentro de la directiva.
Rahul

1
De la guía para desarrolladores de Angular: "Práctica recomendada: utilice el controlador cuando desee exponer una API a otras directivas. De lo contrario, utilice el enlace".
Martin van Driel el

6

la función de compilación -

  1. se llama antes que el controlador y la función de enlace.
  2. En la función de compilación, tiene la plantilla DOM original para que pueda hacer cambios en el DOM original antes de que AngularJS cree una instancia de este y antes de que se cree un ámbito
  3. ng-repeat es un ejemplo perfecto: la sintaxis original es un elemento de plantilla, los elementos repetidos en HTML son instancias
  4. Puede haber varias instancias de elementos y solo un elemento de plantilla
  5. El alcance aún no está disponible
  6. La función de compilación puede devolver la función y el objeto
  7. devolver una función (posterior al enlace): equivale a registrar la función de enlace a través de la propiedad de enlace del objeto de configuración cuando la función de compilación está vacía.
  8. devolver un objeto con funciones registradas a través de las propiedades pre y post: le permite controlar cuándo se debe llamar a una función de enlace durante la fase de enlace. Consulte la información sobre las funciones de preenlace y postenlace a continuación.

sintaxis

function compile(tElement, tAttrs, transclude) { ... }

controlador

  1. llamado después de la función de compilación
  2. alcance está disponible aquí
  3. Se puede acceder por otras directivas (ver atributo requerido)

pre - enlace

  1. La función de enlace es responsable de registrar oyentes DOM así como de actualizar el DOM. Se ejecuta después de que la plantilla ha sido clonada. Aquí es donde se colocará la mayor parte de la lógica directiva.

  2. Puede actualizar el dom en el controlador usando angular.element, pero esto no se recomienda ya que el elemento se proporciona en la función de enlace

  3. La función de preenlace se usa para implementar la lógica que se ejecuta cuando angular js ya ha compilado los elementos secundarios pero antes de que se haya llamado a ninguno de los enlaces posteriores del elemento secundario

post-enlace

  1. directiva que solo tiene función de enlace, angular trata la función como un enlace de publicación

  2. la publicación se ejecutará después de la función de compilación, controlador y preenlace, por eso se considera el lugar más seguro y predeterminado para agregar su lógica directiva

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.