Односторонняя привязка компонента angularjs 1.5 не работает с setInterval

У меня есть простой компонент, который использует таймер для увеличения значения в представлении. Я использую 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

Функция тика вызывается, и значение увеличивается, но пользовательский интерфейс не обновляется. Что случилось? Спасибо


person Lazloman    schedule 18.03.2017    source источник
comment
Я не думаю, что это имеет какое-либо отношение к односторонней привязке. Вы можете изменить свои привязки на {}, и это все равно будет работать. Самое первое, что делает ваш контроллер, — вручную устанавливает локальное свойство count в 0.   -  person toxaq    schedule 07.04.2018


Ответы (1)


Angular не знает, что произошло изменение, потому что вы меняете значение вне области видимости angular. Вместо этого используйте оболочку Angulars $interval.

Документы:

Обертка AngularJS для window.setInterval. Функция fn выполняется каждые миллисекунды задержки.

person Sinisag    schedule 18.03.2017
comment
Именно, служба $interval является оболочкой, которая затем запускает цикл дайджеста. - person cnorthfield; 19.03.2017