angularjs - 当监听器是 Date() 函数时，Angular 观察器不起作用

Question

我知道我在问一个答案非常简单的问题(我是 Angular 的新手，在这里问这个问题确实需要很大的勇气；)。我有一个指令显示这样的时间:

Application.Directives
.directive('theClock', function(){
    return {
        retrict: 'EA',
        templateUrl: 'partials/partial.clock.html',
        link: function(scope, elem, attrs) {

            scope.dTime = Date();
            scope.$watch( function(scp){ return Date(); }, function(newVal){ 

                    scope.dTime = newVal;
                }
            );
        }
    };
});

我希望时间会在每个 $digest 周期更新，但事实并非如此。我知道使用 setInterval 或 $timeout 是另一种方法，但我真的不想要时钟，我想了解为什么更新没有发生。顺便说一句，我确实在检查了 $$phase 之后调用了 $apply() - 没有帮助

谢谢。

Answer 1

$watch 函数默认通过引用比较对象，这对于字符串/数字值更快且更好，但不适用于像 Date 这样的复杂对象 - Date 可能会改变，但它始终是同一个 Date 对象，所以引用不会改变。

这是为了避免对巨大数组进行繁重的相等性测试。

现在，虽然这可能有效(注意 $watch 函数的第三个参数设置为 true):

scope.dTime = new Date();
scope.$watch( function(scp){ return new Date(); }, function(newVal){ 

  scope.dTime = newVal;
  }, true
);

它可能会在每次轮询 $watch 函数时触发一个更改事件(意味着每个应用程序周期)

如果你想每秒触发一次，从 Date() 返回秒数，比如 return Math.floor(new Date().valueOf()/1000)。然后根据需要设置 dTime。

更新

虽然 Angular 的检查可以与 return Date() 一起使用，但问题是由于 Angular 的脏检查系统 - 它只会在模型上触发更改时检查 $watch 函数(意味着在 $scope 中定义的模型)。

这Plnkr ，从 Valentyn Shybanov fork 出来，可以作为一个例子 - 时钟函数触发模型的变化，并且该变化触发 $watch 函数。

另外，注意this version ，它使用 window.setTimeout。它只能使用 $apply 方法来通知 angularJS 发生了变化。