17

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

4

3 回答 3

40

这是因为您在 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);
于 2013-03-27T17:10:32.930 回答
1

您可以在没有 $interval 和 $timeout 的情况下使用

$scope.$watch(function() {
            return variableToWatch;
        }, function(newVal, oldVal) {
            if (newVal !== oldVal) {
                //custom logic goes here......
            }
        }, true);
于 2017-11-01T06:31:00.773 回答
0

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

<div ng-controller="myController">
于 2017-10-10T14:58:40.050 回答