javascript - tipos - Diferencia entre las funciones ''controlador'', ''enlace'' y ''compilar'' al definir una directiva

llamar javascript desde html

Question

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?

Answer 1

1. Ejecución del código antes de la compilación: usar controlador
2. Ejecución de código después de la compilación: usar enlace

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

Aparte 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 quieres acceder al animal desde dentro de la directiva "leopard".

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

Answer 2

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

Realmente recomiendo este video; Redacción de directivas 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 en el video ).

Answer 3

Voy a ampliar un poco tu pregunta y también incluiré la función de compilación.

• función de compilación : se utiliza para la manipulación de DOM de plantilla (es decir, manipulación de tElement = elemento de plantilla), por lo tanto, 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 anteriores y posteriores), y definió una función de compilación, la función de compilación debe devolver la (s) función (es) de ''link'' porque el atributo ''link'' se ignora si el atributo ''compile'' es definido.)

• Función de enlace : normalmente se utiliza para registrar devoluciones de llamada de oyentes (es decir, $watch expresiones de $watch 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 una <li ng-repeat...> , la función de enlace se ejecuta después de que la plantilla <li> (tElement) se haya clonado (en un iElement) para ese elemento <li> particular. A $watch permite que se notifique a una directiva los cambios en las propiedades del ámbito (un ámbito está asociado con cada instancia), lo que permite que la directiva genere un valor de instancia actualizado para el DOM.

• Función de controlador : debe utilizarse cuando otra directiva necesita interactuar con esta directiva. Por ejemplo, en la página de inicio de AngularJS, la directiva de panel debe agregarse al ámbito mantenido por la directiva de pestañas, por lo que la directiva de pestañas debe definir un método de controlador (piense en la API) al que la directiva de panel puede acceder / llamar.
  
  Para obtener una explicación más detallada de las directivas de pestañas y paneles, y por qué la directiva de pestañas crea una función en su controlador usando this (en lugar de en $scope ), consulte ''this'' vs $ scope en los controladores de AngularJS .

En general, puede poner métodos, $watches , etc. 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 fiddle que se registra cuando las funciones de control y enlace se ejecutan con dos directivas anidadas). Como Josh mencionó en un comment , es posible que desee colocar funciones de manipulación de alcance dentro de un controlador solo para mantener la coherencia con el resto del marco.

Answer 4

función de compilación

1. Se llama antes del controlador y la función de enlace.
2. En la función de compilación, tiene la plantilla DOM original para que pueda realizar cambios en el DOM original antes de que AngularJS cree una instancia de la misma y antes de que se cree un alcance
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 múltiples 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) - es equivalente 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. Ver información sobre las funciones de pre-vinculación y post-vinculación a continuación.

sintaxis

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

controlador

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

enlace previo

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

2. Puede actualizar el dominio 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 enlace previo se utiliza 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 cualquiera de los enlaces posteriores del elemento secundario

enlace posterior

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

2. La publicación se ejecutará después de la compilación, el controlador y la función de enlace previo, por lo que se considera el lugar más seguro y predeterminado para agregar la lógica directiva.