Você precisa estar ciente de como o AngularJS funciona para entendê-lo.
Ciclo de resumo e escopo $
Em primeiro lugar, o AngularJS define um conceito do chamado ciclo de digestão . Esse ciclo pode ser considerado como um loop, durante o qual o AngularJS verifica se há alguma alteração em todas as variáveis observadas por todos os $scope
s. Portanto, se você $scope.myVar
definiu em seu controlador e essa variável foi marcada para ser observada , você está dizendo implicitamente ao AngularJS para monitorar as alterações myVar
em cada iteração do loop.
Uma pergunta natural de acompanhamento seria: tudo está ligado à $scope
observação? Felizmente não. Se você observasse as alterações em todos os objetos do seu $scope
computador, rapidamente um ciclo de digestão levaria séculos para ser avaliado e você enfrentaria problemas de desempenho rapidamente. É por isso que a equipe do AngularJS nos deu duas maneiras de declarar alguma $scope
variável como sendo observada (leia abaixo).
O $ watch ajuda a ouvir as alterações do escopo $
Existem duas maneiras de declarar uma $scope
variável como sendo observada.
- Ao usá-lo em seu modelo através da expressão
<span>{{myVar}}</span>
- Adicionando-o manualmente através do
$watch
serviço
Anúncio 1) Esse é o cenário mais comum e tenho certeza de que você já o viu antes, mas não sabia que isso criou um relógio em segundo plano. Sim, tinha! O uso de diretivas AngularJS (como ng-repeat
) também pode criar relógios implícitos.
Anúncio 2) É assim que você cria seus próprios relógios . $watch
O serviço ajuda a executar algum código quando algum valor anexado ao $scope
foi alterado. Raramente é usado, mas às vezes é útil. Por exemplo, se você deseja executar algum código sempre que 'myVar' for alterado, faça o seguinte:
function MyController($scope) {
$scope.myVar = 1;
$scope.$watch('myVar', function() {
alert('hey, myVar has changed!');
});
$scope.buttonClicked = function() {
$scope.myVar = 2; // This will trigger $watch expression to kick in
};
}
$ apply permite integrar alterações ao ciclo de resumo
Você pode pensar na $apply
função como um mecanismo de integração . Veja bem, toda vez que você altera alguma variável observada anexada$scope
diretamente ao objeto, o AngularJS saberá que a alteração ocorreu. Isso ocorre porque o AngularJS já sabia monitorar essas alterações. Portanto, se isso acontecer no código gerenciado pela estrutura, o ciclo de resumo continuará.
No entanto, às vezes você deseja alterar algum valor fora do mundo do AngularJS e ver as mudanças se propagarem normalmente. Considere isso - você tem um $scope.myVar
valor que será modificado no $.ajax()
manipulador de um jQuery . Isso acontecerá em algum momento no futuro. O AngularJS não pode esperar que isso aconteça, pois não foi instruído a esperar no jQuery.
Para resolver isso, $apply
foi introduzido. Permite iniciar explicitamente o ciclo de digestão. No entanto, você deve usar isso apenas para migrar alguns dados para o AngularJS (integração com outras estruturas), mas nunca use esse método combinado ao código AngularJS regular, pois o AngularJS gerará um erro.
Como tudo isso está relacionado ao DOM?
Bem, você realmente deve seguir o tutorial novamente, agora que sabe tudo isso. O ciclo de resumo garantirá que a interface do usuário e o código JavaScript permaneçam sincronizados, avaliando todos os observadores conectados a todos os $scope
s, desde que nada mude. Se não ocorrer mais alterações no loop de digestão, será considerado concluído.
Você pode anexar objetos ao $scope
objeto explicitamente no Controller ou declarando-os no {{expression}}
formulário diretamente na visualização.
Espero que ajude a esclarecer alguns conhecimentos básicos sobre tudo isso.
Leituras adicionais: