AngularJS : comment utiliser scope.$watch et scope.$apply ?
AngularJS possède un cycle appelé cycle $digest. Ce cycle est constitué de 2 boucles, $evalSync et $watch, qui évaluent les changements effectués sur le modèle.
Le framework AngularJS possède un cycle appelé cycle $digest. Ce cycle est constitué de 2 boucles, $evalSync et $watch, qui évaluent les changements effectués sur le modèle. Tant que la boucle $evalSync n'est pas vide, elle se répète, et le framework met à jour le DOM en fonction de ces modifications. Une fois la boucle vide, le framework affiche le DOM mis à jour.
La variable scope.$watch permet de marquer des variables pour qu'elles soient surveillées par le framework. Une variable marquée sera analysée par le framework à chaque itération de la boucle. C'est l'une des deux manières d'indiquer au framework de monitorer une variable (l'autre étant de la déclarer dans un template avec cette expression : {}).
Exemple :
function MonControleur($scope) {
$scope.maVariable = 1;
$scope.$watch('maVarable', function() {
alert('La variable maVariable a été modifiée');
});
$scope.buttonClicked = function() {
$scope.maVariable = 2; //Le clic sur le bouton va déclencher la fonction liée à $watch.
};
}
$apply permet de lancer manuellement le cycle $digest. Si vous modifiez une variable directement dans le scope, vous n'avez pas besoin de faire appel à cette méthode. AgularJS va directement détecter le changement, car il est programmé pour le faire. Si vous changez une variable en dehors du framework, ce ne sera pas le cas. Par exemple, un changement fait dans une requête Ajax avec JQuery ne sera pas détecté par le framework. C'est à ce moment qu'il faut utiliser $apply. $apply lance le cycle $digest du framework, et permet ainsi l'intégration des modifications faites par des méthodes non gérées par le framework.^M