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

Question

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

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

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

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/

543 3

angularjs watch

3 ответов:

Comments

Ничего не найдено.

Martin · Accepted Answer · 2013-03-27 19:10:32

Это потому, что вы обновляете значение без ведома 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);

sumit_suthar · Accepted Answer · 2017-11-01 08:31:00

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

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

Rakesh · Accepted Answer · 2017-10-10 17:58:40

Это также может произойти, потому что div не зарегистрирован в контроллере. Добавьте контроллер к вашему div следующим образом, и ваши часы должны работать:
<div ng-controller="myController">