angularjs – 使用SetInterval / SetTimeout更新范围

发布时间：2020-12-17 06:51:08 所属栏目：安全来源：网络整理

导读：我正在尝试创建一个“时钟”指令作为学习Angular的方法.我怎样才能确保它“嘀嗒”？这是我尝试过的fiddle Link： angular.module('app').directive('clock',function(){ return { restrict: 'E',template: 'div{{date}}/div',link: function(scope,elem,att

我正在尝试创建一个“时钟”指令作为学习Angular的方法.我怎样才能确保它“嘀嗒”？

这是我尝试过的fiddle Link：

angular.module('app')
.directive('clock',function(){
  return {
    restrict: 'E',template: '<div>{{date}}</div>',link: function(scope,elem,attr){
      scope.date = getDate();
      setInterval(function(){
        scope.date = getDate();
      },100);
    }
  }
})

使用setInterval来更新范围变量不起作用.我假设因为该指令不再注意它是否会发生变化？

解决方法

它正在更新范围变量,但Angular并不知道更改.

建议使用Angular $interval.

这是你的$interval：https://jsfiddle.net/oafcde6g/11/的小提琴

换句话说,Angular没有通过“监听”范围属性来做任何魔术,它只是进行脏检查.但要做到这一点,需要通知事情发生了变化.因此,如果你真的想使用setInterval而不是$interval,你可以手动通知它发生了一些变化：

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

这样,您通知它在$apply中运行您的匿名函数,然后消化范围,检查是否有任何更改.如果是,它将更新视图.

ng- *事件的“魔力”(ng-click,ng-model等)

即使看起来像angular会自动知道在使用它的内置指令单击/更改某些内容时重新呈现视图,但事实并非如此.

ng-click的一些简单实现看起来像：

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

如果您尝试在角度上下文之外正常绑定click事件并使其更改范围变量,则可以自己查看.在您明确告知之前它不会更新(就像我们在setInterval示例中所做的那样).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!