angularjs - ejemplos - ¿Cuándo debemos usar `preLink` de la función de compilación de la directiva?

directivas personalizadas angularjs

Question

La función de compilación de la directiva angularjs ''tiene dos funciones: preLink y postLink .

Función de enlace previo

Ejecutado antes de que los elementos secundarios estén vinculados. No es seguro realizar una transformación DOM ya que la función de enlace del compilador no podrá ubicar los elementos correctos para vincular.

Función post-enlace

Se ejecuta después de que los elementos secundarios estén vinculados. Es seguro realizar la transformación de DOM en la función de enlace posterior.

preLink lo que no deberíamos hacer en preLink , me pregunto qué y cuándo debería usar preLink . Durante la mayor parte del tiempo acabo de usar postLink . ¿Hay algún caso en que debemos usarlo?

Answer 1

Casi nunca necesitas usar preLink . Casos viables para esto son cuando se necesita manipular datos en el alcance, pero no el DOM , antes de que se ejecuten las funciones de link (también de otras directivas).

Como comentó jacob, siempre puedes hacer eso desde un controlador, pero a veces es más apropiado tener el código en la directiva en sí.

Hay un excelente artículo sobre cómo funcionan las directivas donde se explica bien el orden de enlace a: http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/

Si necesita un buen ejemplo de por qué el enlace previo a veces es necesario, le recomiendo que mire el código de directivas angulares. Por ejemplo https://github.com/angular/angular.js/blob/master/src/ng/directive/ngModel.js

Answer 2

Se preLink función preLink cuando la directiva quiere poner algo en un ámbito compartido para que esté listo para ser utilizado por otras directivas en sus funciones postLink .

La directiva de forma angular, por ejemplo, crea un objeto que contiene entradas para todas las entradas. Una directiva personalizada podría acceder de forma segura a este objeto en una función postLink .

Answer 3

Tuve que usar preLink al crear directivas personalizadas que incluyen otras directivas. En mi caso, mi directiva incluía una plantilla que aplicaba la directiva de Typeahead de Angular UI Bootstrap a algunos de sus elementos y utilizaba sus propias variables de ámbito para inicializar características de Typeahead.

Por ejemplo:

...
template:
"<select ng-show=''dropdown'' class=''form-control'' ng-model=''ngModel'' ng-options=''s for s in suggestions''></select>"
+ "<textarea ng-show=''!dropdown'' class=''form-control'' ng-model=''ngModel'' typeahead=''s for s in suggestions |filter:$viewValue'' typeahead-min-length=''0'' typeahead-editable=''{{editable}}''></textarea>",
...

En ese caso, Angular vincula las directivas hijo con el padre, por lo que necesitaba usar preLink para configurar el typeahead. Cuando inicialicé las variables $ scope.dropdown y $ scope.editable en la función directivas postLink, descubrí que no se inicializaron cuando se vincularon las directivas typeahead y tuve que mover su inicialización al preLink para hacer que esta directiva funcione correctamente.