AngularJS：基本的$ watch不起作用

Question

我正在尝试在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/

Answer 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（）;。强制角度重新检查值并在必要时致电手表。

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