AngularJS: Basic $ watch non funziona

Question

Sto tentando di impostare un orologio in AngularJS e sto chiaramente facendo qualcosa di sbagliato, ma non riesco a capirlo. L'orologio si attiva nel caricamento immediato della pagina, ma quando cambio il valore osservato non spara. Per la cronaca, ho anche impostato l'orologio su una funzione anonima per restituire la variabile osservata, ma ho gli stessi esatti risultati.

Ho seguito un esempio minimale, facendo tutto nel controller. Se fa la differenza, il mio codice attuale è collegato alle direttive, ma entrambi stanno fallendo nello stesso modo. Mi sento come se ci fosse qualcosa di fondamentale che mi manca, ma non lo vedo.

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!'); }); 
} 

Le opere di timeout, hello incrementi, ma l'orologio non sparare.

Demo a http://jsfiddle.net/pvYSu/

Answer 1

È perché si aggiorna il valore senza angolare sapere.

È necessario utilizzare il servizio $timeout anziché setTimeout e non è necessario preoccuparsi di tale problema.

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!'); }); 
} 

Oppure è possibile chiamare $ scope. $ Apply(); forzare l'angolo per ricontrollare i valori e chiamare gli orologi se necessario.

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

Answer 2

Può anche verificarsi perché il div non è registrato con il controller. Aggiungi un controller al div nel seguente modo e l'orologio dovrebbe funzionare:

<div ng-controller="myController"> 

Answer 3

È possibile utilizzare senza $ intervallo e $ timeout

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