AngularJS: Diferencia entre las funciones 'controller', 'link' y 'compile' en una Directiva

Al escribir directivas en AngularJS nos topamos con las funciones compile, link y controller. Veremos qué son cada una de ellas y cuando usarlas.

• Función compile: Usado para la manipulación de tElements, o template elements, del DOM, por lo tanto manipulaciones que aplican a todos los clones asociados con la directiva. Si usas las funciones link, prelink o postlink, la función compile debe retornar una función link porque el atributo 'link' es ignorado si hay un atributo 'compile' definido.
• Función link: Normalmente usado para registrar listeners en el DOM, como expresiones $watch en el scope), así como actualizar el DOM manipulando los iElement o individual element. Es ejecutado después de que la plantilla ha sido clonada, por ejemplo al usar ng-repeat. Digamos que estamos dentro de <li ng-repeat...>, la función link es ejecutada después que el tElement <li> ha sido clonado en un iElement. $watch permite a la directiva ser notificada de un cambio en una propiedad del scope (asociado a cada instancia), lo que permite a la directiva mostrar un valor de instancia actualizado al DOM.
• Función controller: Debe ser usado cuando otra directiva necesita interactuar con esta directiva.

A tener en cuenta: La función compile no tiene acceso al scope, pero si la función link.

Reglas de Oro

• Correr código antes de compilar: compile
• Correr código después de compilar: link

 

Convenciones en Angular

• Lógica del negocio: controller
• Manipulación del DOM: link

Para directivas simples: Usar solo link