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

17

Я пытаюсь настроить часы в 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 увеличивается, но часы не срабатывают.

Демо на Ссылка

    
задан David Kiger 27.03.2013 в 18:04
источник

3 ответа

40

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

Вы должны использовать $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 (); чтобы заставить углы перепроверять значения и, если необходимо, вызвать часы.

var t = setTimeout( function() { 
    $scope.hello++;
    console.log($scope.hello); 
    $scope.$apply();
}, 5000);
    
ответ дан Martin 27.03.2013 в 18:10
источник
  • Использование setTimeout было только для примера. . $ apply () был тем, чего мне не хватало в реальном мире. Благодаря! –  David Kiger 27.03.2013 в 18:12
0

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

<div ng-controller="myController">
    
ответ дан Rakesh 10.10.2017 в 16:58
источник
0

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

$scope.$watch(function() {
            return variableToWatch;
        }, function(newVal, oldVal) {
            if (newVal !== oldVal) {
                //custom logic goes here......
            }
        }, true);
    
ответ дан sumit_suthar 01.11.2017 в 07:31
источник