当侦听器是Date()函数时,Angular watcher不起作用

Question

我知道我问的是一个答案非常简单的问题(我是棱角分明的新人,在这里问这个确实需要很大的勇气;).我有一个指令显示这样的时间:

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周期,但事实并非如此.我知道使用setIntervalot $timeout是另一种方法,但我真的不想要一个时钟,我想了解为什么更新不会发生.顺便说一句,我$apply()在检查后打电话$$phase- 没有帮助

谢谢.

Answer 1

$ watch函数默认按引用比较对象,对于字符串/数字值更快更好,但不适用于复杂对象,如Date - 日期可能会更改,但它总是相同的Date对象,因此引用不会改变.

这是为了避免在巨大的阵列上进行严重的等式测试.

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

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

  scope.dTime = newVal;
  }, true
);

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

如果你想要if每秒触发,那么从Date()返回秒,返回类似于返回Math.floor(new Date().valueOf()/ 1000).然后根据需要设置dTime.

更新

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

这Plnkr,从Valentyn Shybanov的分叉,可以作为一个例子-时钟功能触发模型上的改变,而这种改变触发$手表功能.

另外,请注意这个版本,它使用window.setTimeout.它只能使用$ apply方法来通知angularJS发生了更改.