如何将香草JS秒表转换为Angular？

Question

JS的新功能，如果不允许，将删除。 我有一些常规的JS代码，我一直在尝试将其切换为控制器。

对于给定的示例，什么是最优化的方法。 我已经看到了带有指令，计数器等的情况，但是我认为这对于我正在做的事情来说非常复杂。 到目前为止，我已经成功绑定了几秒钟和数十个屏幕，但是在更新$ interval时遇到问题，我是否需要.watch，.promises .then？ （很抱歉，对于newb问题，任何帮助都将非常有用）

JS脚本

   window.onload = function() {

     var seconds = 00;
     var tens = 00;
     var appendTens = document.getElementById("tens");
     var appendSeconds = document.getElementById("seconds");
     var buttonStart = document.getElementById('button-start');
     var buttonStop = document.getElementById('button-stop');
     var buttonReset = document.getElementById('button-reset');
     var Interval;


     buttonStart.onclick = function () {

       clearInterval(Interval);
       Interval = setInterval(startTimer, 10);
     };

     buttonStop.onclick = function () {
       clearInterval(Interval);
     };


     buttonReset.onclick = function () {
       clearInterval(Interval);
       tens = "00";
       seconds = "00";
       appendTens.innerHTML = tens;
       appendSeconds.innerHTML = seconds;
       console.log("clear()");
     };


     function startTimer() {
       tens++;

       if (tens < 9) {
         appendTens.innerHTML = "0" + tens;
       }

       if (tens > 9) {
         appendTens.innerHTML = tens;

       }

       if (tens > 99) {
         console.log("seconds");
         seconds++;
         appendSeconds.innerHTML = "0" + seconds;
         tens = 0;
         appendTens.innerHTML = "0" + 0;
       }

       if (seconds > 9) {
         appendSeconds.innerHTML = seconds;
       }

     }

   };

这就是我将HTML绑定到屏幕的方式

<span id="seconds">{{ seconds+":"+tens }}</span>

Answer 1

我用一个简单的$interval循环进行了设置，该循环更新了秒和分钟：

angular.module('plunker', []).controller('MainCtrl', function($interval) {
  var interval_;

  this.seconds = 0;
  this.minutes = 0;

  this.start = function() {
    interval_ = $interval(function() {
      this.seconds++;
      if(this.seconds > 59) {
        this.seconds = 0;
        this.minutes++;
      }
    }.bind(this), 1000)
  }

  this.stop = function() {
    $interval.cancel(interval_)
  }
})
.filter('adjustTime', function(){
  return function(input) {
    if(input < 10) {
      return '0' + input;
    }
    return input;
  }
});

我是代表团的支持者，所以我制作了一个您可以处理的过滤器，以将多余的0加到小于10的地方； 无需考虑$interval逻辑。

普伦克