AngularJS: Basic $ watch not working

Question

Próbuję skonfigurować zegarek w AngularJS i wyraźnie robię coś złego, ale nie mogę tego dokładnie rozgryźć. Zegarek uruchamia się natychmiast po załadowaniu strony, ale kiedy zmienię obserwowaną wartość, nie jest on uruchamiany. Dla przypomnienia ustawiłem też zegarek na anonimowej funkcji, aby zwrócić zmienną obserwowaną, ale mam dokładnie takie same wyniki.

Podsumowałem minimalny przykład poniżej, robiąc wszystko w kontrolerze. Jeśli to robi różnicę, mój aktualny kod jest powiązany z dyrektywami, ale oba zawodzą w ten sam sposób. Czuję, że musi być coś podstawowego, czego mi brakuje, ale po prostu tego nie widzę.

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

Roboty budowlane Timeout przyrosty hello, ale zegarka nie ogień.

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

Answer 1

To dlatego zaktualizować wartość bez kątowa wiedząc.

Należy użyć usługi $timeout zamiast setTimeout i nie trzeba się martwić o ten problem.

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

Możesz też zadzwonić do $ scope. $ Apply(); wymuszać kątowe, aby w razie potrzeby ponownie sprawdzić wartości i zegarki.

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

Answer 2

Może się również zdarzyć, ponieważ element div nie jest zarejestrowany w kontrolerze. Dodaj kontroler do div następująco i zegarek powinno działać:

<div ng-controller="myController"> 

Answer 3

można używać bez odstępu $ i $ Timeout

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