como funciona a vinculação e digestão no AngularJS?

Uma coisa que separa o AngularJS de outras estruturas de JavaScript-MVC é a capacidade de ecoar valores vinculados de JavaScript em HTML usando ligações. Angular faz isso “automaticamente” quando você atribui qualquer valor à variável $ scope.

Mas quão automático é isso? Às vezes, o Angular não atende à mudança, então eu preciso chamar o $ scope. $ Apply () ou $ scope. $ Digest () para informar o angular para coletar a alteração. Às vezes, quando executo um desses methods, ele gera um erro e diz que um resumo já está em andamento.

Como as ligações (qualquer coisa dentro de {{}} chaves ou ng-atributos) são ecoadas com eval, então isso significa que Angular está constantemente pesquisando o object $ scope para procurar por mudanças e então executando um eval para empurrar essas mudanças para o DOM / HTML? Ou AngularJS de alguma forma descobriu o uso de variables ​​mágicas que triggersm events que são acionados quando um valor variável é alterado ou é atribuído? Eu nunca ouvi falar de ser totalmente suportado por todos os navegadores, então eu duvido.

Como o AngularJS monitora suas vinculações e variables ​​de escopo?

Além da seção de documentação encontrada por Mark, acho que podemos tentar enumerar todas as possíveis fonts de mudança.

  1. Interação do usuário com inputs HTML ( ‘texto’ , ‘número’ , ‘url’ , ’email’ , ‘radio’ , ‘checkbox’ ). AngularJS tem inputDirective . As inputs ‘text’, ‘number’, ‘url’ e ’email’ ligam o manipulador de listener aos events ‘input’ ou ‘keydown’. O manipulador de listener chama o escopo. $ Apply . ‘radio’ e ‘checkbox’ ligam o manipulador similar para o evento click.
  2. Interação do usuário com o elemento select. AngularJS tem selectDirective com comportamento similar no evento ‘change’.
  3. Mudanças periódicas usando o serviço $ timeout que também faz $ rootScope. $ Apply () .
  4. EventDirectives (ngClick, etc) também usam o escopo. $ apply .
  5. $ http também usa $ rootScope. $ apply () .
  6. Mudanças fora do mundo AngularJS devem usar o escopo. $ Aplicar como você sabe.

Como você descobriu que não é polling, mas usando o loop de execução interno, é por isso que você precisa usar $ apply () ou $ digest () para colocar as coisas em movimento.

A explicação de Miško é bastante completa, mas o pouco que falta é que Angular está apenas tentando fazer com que o $ scope volte a um estado interno claro sempre que algo acontece dentro de seu próprio contexto. Isso pode levar alguns saltos entre os estados do modelo, então também é por isso que você não pode confiar no $ watch () triggersndo apenas uma vez e também porque você deve ter cuidado ao configurar manualmente as relações entre os modelos ou você acabará ininterruptamente atualizações circulares.