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);