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

你可以不使用 $interval 和 $timeout

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

Answer 2

这也可能是因为 div 未向控制器注册。如下向您的 div 添加一个控制器，您的手表应该可以工作：

<div ng-controller="myController">

Answer 3

这是因为你在 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);