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

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?

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.

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 ).

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

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