Pregunta ¿Cómo funciona el enlace y la digestión en AngularJS?


Una cosa que distingue a AngularJS de otros frameworks JavaScript-MVC es su capacidad para hacer eco de valores enlazados de JavaScript a HTML mediante enlaces. Angular lo hace "automáticamente" cuando asigna cualquier valor a la variable $ scope.

Pero, ¿qué tan automático es esto? Algunas veces, Angular no se dará cuenta del cambio, así que necesito llamar a $ scope. $ Apply () o $ scope. $ Digest () para informarle a angular que recoja el cambio. A veces, cuando ejecuto cualquiera de esos métodos, arroja un error y dice que ya hay un resumen en curso.

Como las vinculaciones (cualquier cosa dentro de {{}} llaves o ng-atributos) se repiten con eval, esto significa que Angular está sondeando constantemente el objeto $ scope para buscar cambios y luego realizar una evaluación para impulsar esos cambios al DOM / HTML? ¿O AngularJS de alguna manera ha descubierto el uso de variables mágicas que desencadenan eventos que se desencadenan cuando un valor variable cambia o se asigna? Nunca he escuchado que sea totalmente compatible con todos los navegadores, así que lo dudo.

¿Cómo hace AngularJS para realizar un seguimiento de sus enlaces y variables de ámbito?


76
2017-09-17 16:57


origen


Respuestas:


Además de sección de documentación encontrado por Mark, creo que podemos tratar de enumerar todas las posibles fuentes de cambio.

  1. Interacción del usuario con entradas HTML ('texto', 'número', 'url', 'correo electrónico', 'radio', 'caja') AngularJS tiene inputDirective. Las entradas de 'texto', 'número', 'url' y 'correo electrónico' se unen controlador de escucha para eventos de 'entrada' o 'keydown'. Controlador de escucha alcance de llamadas. $ aplicar. 'radio' y 'checkbox' vinculan un manejador similar para el evento click.
  2. Interacción del usuario con el elemento seleccionado. AngularJS tiene selectDirective con un comportamiento similar en el evento 'cambio'.
  3. Cambios periódicos usando $ tiempo de espera de servicio eso también $ rootScope. $ apply ().
  4. eventDirectives (ngClick, etc.) también use alcance. $ aplicar.
  5. $ http también usa $ rootScope. $ apply ().
  6. Los cambios fuera del mundo de AngularJS deben usar scope. $ Aplicar como usted sabe.

64
2017-09-19 08:52



Como descubrió que no es un sondeo, sino que usa su ciclo de ejecución interno, es por eso que necesita usar $ apply () o $ digest () para poner las cosas en movimiento.

La explicación de Miško es bastante minucioso, pero el que falta es que Angular solo está intentando hacer que $ scope vuelva a tener un estado interno claro siempre que algo suceda dentro de su propio contexto. Esto puede tomar bastante rebote entre los estados del modelo, así que también es por eso que no puede confiar en $ watch () disparar solo una vez y también por qué debe tener cuidado al configurar manualmente las relaciones entre los modelos o terminará en un sinfín refrescos circulares


5
2017-09-19 00:23