Angularjs 使用SetInterval/SetTimeout更新作用域

我试图创建一个“时钟”指令作为学习角度的一种方式。我该如何确保它“滴答”呢

以下是我尝试过的：

angular.module（'app'）
.directive（'clock'，function（）{
返回{
限制：'E'，
模板：“{date}}”，
链接：功能（范围、要素、属性）{
scope.date=getDate（）；
setInterval（函数（）{
scope.date=getDate（）；
}, 100);
}
}
})

---

使用setInterval更新范围变量不起作用。我这样假设是因为指令不再关注它的变化了？

它正在更新范围变量，但Angular没有意识到变化

建议使用角形

这是您的小提琴

$interval

：

换句话说，Angular并没有通过“监听”作用域属性来发挥任何作用，它只是执行脏检查。但要做到这一点，需要通知它发生了变化。因此，如果您确实想使用

setInterval

而不是

$interval

，您可以手动通知它发生了更改：

setInterval(function () {
    scope.$apply(function () {
        scope.date = getDate();
    });
});

这样，您就通知它在

$apply

中运行匿名函数，然后消化作用域，检查是否有任何更改。如果有，它将更新视图

ng-*事件的“魔力”（ng点击、ng模型等） 尽管看起来angular自动知道在使用内置指令单击/更改某些内容时重新渲染视图，但事实并非如此

ng click

的一些简单实现如下所示：

angular.module('app')
.directive('ngClick' , function(){
  return {
    restrict: 'A',
    link: function(scope, elem, attr){
        elem.on('click', function () {
            scope.$apply(function () {
                scope.$eval(attr.ngClick);
            });
        });
    }
  }
})

如果您尝试在角度上下文之外正常绑定click事件并使其更改范围变量，您可以自己看到这一点。在您明确告诉它之前，它不会更新（就像我们在

setInterval

示例中所做的那样）

angular.module('app')
.directive('ngClick' , function(){
  return {
    restrict: 'A',
    link: function(scope, elem, attr){
        elem.on('click', function () {
            scope.$apply(function () {
                scope.$eval(attr.ngClick);
            });
        });
    }
  }
})