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

Answer 2

您可以不使用$ interval和$ timeout

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

Answer 3

也可能因为div未向控制器注册而发生。按如下方式为div添加一个控制器，你的手表应该可以工作：

<div ng-controller="myController">

AngularJS：基本$ watch无效

3 个答案: