2017-03-18 10 views
1

私は、ユーザがビュー内の値を増やすための簡単なコンポーネントを持っています。私は自動的に値を増やすためにsetIntervalを使い、値をインクリメントするためにボタンを使います。ボタンをクリックすると期待通りに機能しますが、setIntervalは何もせず、エラーも増分も行いません。angularjs 1.5コンポーネント片方向バインディングは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 

ティック関数が呼び出され、値はインクリメントされますが、UIは更新されません。 どうしたの?ありがとう

答えて

3

角は、角度の範囲外の値を変更しているため、変更が行われたことに気付かない。代わりにAngularsラッパー$ intervalを使用してください。

Docs:window.setIntervalため

AngularJSのラッパー。 fn関数は、遅延ミリ秒ごとに実行される です。

+0

正確には、['$ interval'](https://docs.angularjs.org/api/ng/service/$interval)サービスは、ダイジェストサイクルをトリガーするラッパーです。 – cnorthfield

関連する問題