FabrícioRonchi

Two-Way Data Binding

05 February 2014

Como funciona o mecanismo de data binding?

Two-Way Data Binding é um vínculo de mão dupla que, por meio um processo de notificação, sincroniza os dados existentes na View e no Controller. Ele evita uma enorme quantidade de código desnecessário, utilizado apenas para trafegar dados entre ambas as camadas.

Sem o mecanismo de data binding

Com o mecanismo de data binding

Processo de Inicialização

Para entender como o AngularJS consegue manter o sincronismo de dados entre a View e o Controller, é importante compreender o processo de inicialização do framework.

  • O compilador percorre a árvore DOM em busca de diretivas do tipo ng-model.
  • Ao encontrar, a função $apply é adicionada ao evento onkeydown. Dessa forma, ao pressionar qualquer tecla dentro de um campo de texto, o sistema de notificação de mudanças é notificado.
  • Em seguida, o compilador busca as expressões, utilizando a função $watch para fazer o registro no sistema de notificação de mudanças no estado das propriedades.

Qualquer dúvida, chama aí no Twitter!