web-dev-qa-db-fra.com

AngularJS: La montre $ de base ne fonctionne pas

J'essaie de mettre en place une montre dans AngularJS et je fais clairement quelque chose de mal, mais je n'arrive pas à comprendre. La montre se déclenche dès le chargement de la page, mais lorsque je modifie la valeur surveillée, elle ne se déclenche pas. Pour mémoire, j'ai également configuré la surveillance sur une fonction anonyme pour renvoyer la variable surveillée, mais j'ai exactement les mêmes résultats.

J'ai calé un exemple minimal ci-dessous, tout faire dans le contrôleur. Si cela fait une différence, mon code actuel est lié à des directives, mais les deux échouent de la même manière. J'ai l'impression qu'il me manque quelque chose de fondamental, mais je ne le vois pas.

HTML:

<div ng-app="testApp">
    <div ng-controller="testCtrl">
    </div>
</div>

JS:

var app = angular.module('testApp', []);

function testCtrl($scope) {
    $scope.hello = 0;

    var t = setTimeout( function() { 
        $scope.hello++;
        console.log($scope.hello); 
    }, 5000);

    $scope.$watch('hello', function() { console.log('watch!'); });
}

La temporisation fonctionne, hello incrémente, mais la montre ne se déclenche pas.

Démo sur http://jsfiddle.net/pvYSu/

angularjswatch
17
David Kiger

C'est parce que vous mettez à jour la valeur sans que Angular sache.

Vous devez utiliser le service $timeout au lieu de setTimeout et vous n'avez pas à vous soucier de ce problème.

function testCtrl($scope, $timeout) {
    $scope.hello = 0;

    var t = $timeout( function() { 
        $scope.hello++;
        console.log($scope.hello); 
    }, 5000);

    $scope.$watch('hello', function() { console.log('watch!'); });
}

Vous pouvez aussi appeler $ scope. $ Apply (); pour forcer angulaire à revérifier les valeurs et à faire un appel de veille si nécessaire.

var t = setTimeout( function() { 
    $scope.hello++;
    console.log($scope.hello); 
    $scope.$apply();
}, 5000);
40
Martin

Vous pouvez utiliser sans $ interval et ni timeout

$scope.$watch(function() {
            return variableToWatch;
        }, function(newVal, oldVal) {
            if (newVal !== oldVal) {
                //custom logic goes here......
            }
        }, true);
1
sumit_suthar

Cela peut aussi arriver parce que la div n'est pas enregistrée avec le contrôleur. Ajoutez un contrôleur à votre div comme suit et votre montre devrait fonctionner:

<div ng-controller="myController">
0
Rakesh