switch - ng-href angularjs

Orden de llamada de la función de enlace en directivas angulares anidadas y repetidas

Question

Soy bastante nuevo en la programación de Javascript y solo he abordado AngularJS. Para evaluarlo, decidí escribir una aplicación de notas simple. El modelo es realmente simple, una lista de notas donde cada nota tiene una etiqueta, un texto y una lista de etiquetas. Sin embargo, me topé con datos que pasan problemas entre ámbitos aislados de directivas anidadas.

Tengo tres directivas, notas, notas y etiquetadores (que definen nuevos elementos con los mismos nombres). Cada uno de ellos usando un alcance aislado.

La directiva de notas usa ng-repeat para "renderizar" cada una de sus notas con el elemento de nota.

La directiva de notas usa el elemento del etiquetador para "renderizar" la lista de etiquetas.

La directiva de notas define el alcance: {getNote: "&", ...} para pasar una instancia de nota de la lista de notas al controlador / directiva de nota. La función getNote (index) se llama en la función link de la directiva note. Esto funciona bien!

La directiva del etiquetador define el alcance: {getTags: "&", ...} para pasar una lista de etiquetas para una nota dada al controlador / directriz del etiquetador. La función getTags se llama en la función de enlace de la directiva tagger. ¡Esto no funciona!

Según tengo entendido, el problema es que las funciones de enlace de las directivas se llaman en un orden incoherente. La depuración de la aplicación muestra que las funciones de enlace se invocan en el siguiente orden:

1. función de enlace en la directiva de notas (agregando la función getNote al alcance de las notas)

2. función de enlace en la directiva tagger de la función de la primera nota (llamar a getTags en el alcance de la nota principal)

3. función de enlace en la directiva de la primera nota (agregando los getTags al alcance) (llamando a getNote en el alcance de las notas de los padres)

4. función de enlace en la directiva tagger de la función de la segunda nota (llamar a getTags en el alcance de la nota principal)

5. función de enlace en la segunda directiva de notas (agregando los getTags al alcance) (llamando a getNote en el alcance de las notas de los padres)

Esto no funcionará, ya que en el n. ° 2 el alcance de la primera nota aún no tiene una función getTags.

Un ejemplo simplista se puede encontrar en Plunker .

Por lo tanto, mi pregunta se reduce a: Lo que determina el orden en que las funciones de enlace se llaman en directivas anidadas.

(Resolví el problema usando $ watch en getTags en la directiva tagger ...)

Saludos

Answer 1

En un solo elemento, el orden de las funciones de vinculación está determinado por el orden de las Funciones de compilación, que a su vez se ordena de acuerdo con la propiedad de priority del objeto de definición de directiva.

Fuente: http://docs.angularjs.org/guide/directive

En elementos múltiples con transclusión: las directivas internas se evalúan antes que las directivas externas. Motivo: naturaleza de la transclusión.

En elementos múltiples con hermanos: Ejecutado en orden de arriba a abajo. Motivo: lógica de análisis de $ compile.

Answer 2

Citando a Josh D. Miller, quien amablemente respondió a una pregunta similar que tuve:

"Solo un par de notas técnicas. Suponga que tiene este marcado:

<div directive1>
  <div directive2>
    <!-- ... -->
  </div>
</div>

Ahora AngularJS creará las directivas ejecutando funciones directivas en un orden determinado:

directiva1: compilar

directiva2: compilar

directiva1: controlador

directiva1: enlace previo

directiva2: controlador

directiva2: pre-link

directiva2: post-link

directiva1: enlace posterior

Por defecto, una función de "enlace" directa es un enlace posterior, por lo que la función de enlace de su directiva externa1 no se ejecutará hasta después de que se haya ejecutado la función de enlace de la directiva interna2. Es por eso que decimos que solo es seguro hacer la manipulación de DOM en el enlace posterior. "