AngularJS: Basic $watch не работает

Я пытаюсь настроить часы в AngularJS, и я явно делаю что-то неправильно, но я не могу это понять. Часы срабатывают при непосредственной загрузке страницы, но когда я изменяю наблюдаемое значение, оно не срабатывает. Для записи я также настроил часы на анонимной функции, чтобы вернуть наблюдаемую переменную, но у меня есть те же самые результаты.

Я подстроил минимальный пример ниже, делая все в контроллере. Если это имеет значение, мой фактический код подключается в директивах, но оба не работают одинаково. Я чувствую, что мне что-то не хватает, но я просто этого не вижу.

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

Время ожидания работает hello, но часы не срабатывают.

Демо на http://jsfiddle.net/pvYSu/

Ответы

Ответ 1

Это потому, что вы обновляете значение без Angular зная.

Вам следует использовать службу $timeout вместо setTimeout, и вам не нужно будет беспокоиться об этой проблеме.

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

Или вы можете вызвать $scope. $apply(); чтобы заставить Angular повторно проверить значения и вызвать часы, если это необходимо.

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

Ответ 2

Это также может случиться, потому что div не зарегистрирован в контроллере. Добавьте контроллер в свой div следующим образом, и ваши часы должны работать:

<div ng-controller="myController">

Ответ 3

Вы можете использовать без $interval и $timeout

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