javascript - angularjs 1.5 组件一种方式绑定(bind)不适用于 setInterval

Question

我有一个简单的组件，它使用计时器来增加 View 中的值。我使用 setInterval 来自动递增该值，我还使用按钮来递增该值。单击按钮按预期工作，但 setInterval 什么也不做，没有错误，没有增量。这是代码:

export default angular.module('directives.timer', [])
.component('timer',{

bindings:{
    count: '<'
},
template:`<div>{{$ctrl.count}}</div>
          <div><button ng-click="$ctrl.increment()">increment</button></div>
          <pre>{{$ctrl}}</pre>`,

controller: function(){
   this.count = 0;
   this.tick = function(){
       this.count = this.count++;
   }
   this.increment = function(){
       this.count++;
   }

   this.$onInit = function(){
       var _this = this;
       setInterval(function(){
           _this.tick();
       }, 1000);
   }
}
}).name

tick 函数被调用，值增加，但 UI 没有更新。怎么了？谢谢

Answer 1

Angular 并不知道发生了变化，因为你正在改变 Angular 范围之外的值。而是使用 Angulars 包装器 $interval。

Docs :

AngularJS's wrapper for window.setInterval. The fn function is executed every delay milliseconds.