javascript - AngularJS 中的计时器未绑定(bind) DOM 值

Question

我是一名后端开发人员，他正在努力通过比较两种不同的日期格式来制作计时器。脚本的这一部分工作得很好，但是每当我尝试进行递归调用时，没有任何绑定(bind)。

我几乎尝试了所有方法，从将其传递到函数中，到使用 $interval、setInterval 等等。主要原因是我无法获取其循环的值，并绑定(bind)到我的 DOM 中。

这是我的一些代码。这里我设置了 countDown() 函数的所有变量。

   $scope.timer.list        = {};
    $scope.timer.date       = new Date();
    $scope.timer.list.D     = '00';
    $scope.timer.list.M     = '00';
    $scope.timer.list.Y     = '00';
    $scope.timer.list.h     = '00';
    $scope.timer.list.m     = '00';
    $scope.timer.list.s     = '00';
    $scope.begin            = {};
    $scope.begin.date       = {};
    $scope.begin.timer      = {};
    $scope.counter = {
        show : false,
        text : '00:00'
    };
    setInterval(function() {
        $scope.obj = {
            show : $scope.countDown($scope.privateshowcase.begin_at).show,
            text : $scope.countDown($scope.privateshowcase.begin_at).text
        }
        $scope.counter = $scope.obj;
    }, 1000);

然后，这是函数:

$scope.countDown = function(begin) {
    $scope.timer.date       = new Date();

    $scope.timer.list.D = $filter('date')($scope.timer.date, 'dd');
    $scope.timer.list.M = $filter('date')($scope.timer.date, 'MM');
    $scope.timer.list.Y = $filter('date')($scope.timer.date, 'yyyy');
    $scope.timer.list.h = $filter('date')($scope.timer.date, 'HH');
    $scope.timer.list.m = $filter('date')($scope.timer.date, 'mm');
    $scope.timer.list.s = $filter('date')($scope.timer.date, 'ss');

    $scope.begin.full = begin.split(" ");
    $scope.begin.date = $scope.begin.full[0].split("-");
    $scope.begin.timer = $scope.begin.full[1].split(":");

    $scope.begin.D = $scope.begin.date[2];
    $scope.begin.M = $scope.begin.date[1];
    $scope.begin.Y = $scope.begin.date[0];
    $scope.begin.h = $scope.begin.timer[0];
    $scope.begin.m = $scope.begin.timer[1];
    $scope.begin.s = $scope.begin.timer[2];

    if($scope.timer.list.Y == $scope.begin.Y) {
        if($scope.timer.list.M == $scope.begin.M) {
            if($scope.timer.list.D == $scope.begin.D) {
                $scope.counter.diff_h = $scope.timer.list.h - $scope.begin.h;
                if($scope.counter.diff_h == 0 || $scope.counter.diff_h == -1) {
                    if($scope.counter.diff_h == 0) {
                        if($scope.timer.list.m > $scope.begin.m) {
                            $scope.counter.show = false;
                            $scope.counter.text = false;
                        } else if ($scope.timer.list.m <= $scope.begin.m) {
                            $scope.counter.show = true;
                            $scope.counter.diff_m = $scope.begin.m - $scope.timer.list.m;
                            if($scope.counter.diff_m <= 30) {
                                $scope.counter.diff_s = 60 - $scope.timer.list.s;
                                if($scope.counter.diff_s == 60) {
                                    $scope.counter.s = "00";
                                    $scope.counter.diff_m_f = $scope.counter.diff_m + 1;
                                } else if($scope.counter.diff_s >= 1 && $scope.counter.diff_s <= 9) {
                                    $scope.counter.s = "0" + $scope.counter.diff_s;
                                    $scope.counter.diff_m_f = $scope.counter.diff_m;
                                } else {
                                    $scope.counter.s = $scope.counter.diff_s;
                                    $scope.counter.diff_m_f = $scope.counter.diff_m;
                                }
                                if($scope.counter.diff_m_f >= 1 && $scope.counter.diff_m_f <= 9) {
                                    $scope.counter.m = "0" + $scope.counter.diff_m_f;
                                } else {
                                    $scope.counter.m = $scope.counter.diff_m_f;
                                }
                            }
                            $scope.counter.text = $scope.counter.m + ":" +$scope.counter.s;

                        } else {
                            $scope.counter.show = false;
                            $scope.counter.text = false;
                        }
                    } else if ($scope.counter.diff_h == -1) {

                        $scope.counter.diff_timer = $scope.timer.m - 60;
                        $scope.counter.diff_m =  $scope.begin.m - $scope.counter.diff_timer;
                        if($scope.counter.diff_m > 30) {
                            $scope.counter.show = false;
                            $scope.counter.text = false; 
                        } else if($scope.counter.diff_m <= 30) {
                            $scope.counter.show = true;
                            $scope.counter.diff_timer_s = $scope.timer.s - 60;
                            if($scope.counter.diff_timer_s == 60) {
                                $scope.counter.s = "00";
                                $scope.counter.m = $scope.counter.diff_m + 1;
                            } else if($scope.counter.s >= 1 && $scope.counter.s <= 9) {
                                $scope.counter.s = "0" + $scope.counter.diff_timer_s;
                                $scope.counter.m = $scope.counter.diff_m;
                            } else {
                                $scope.counter.s = $scope.counter.diff_timer_s;
                                $scope.counter.m = $scope.counter.diff_m;
                            }
                            $scope.counter.text = $scope.counter.m + ":" +$scope.counter.s;
                        } else {
                            $scope.counter.show = false;
                            $scope.counter.text = false;
                        }
                    } else {
                        $scope.counter.show = false;
                        $scope.counter.text = false;
                    }
                } else {
                    $scope.counter.show = false;
                    $scope.counter.text = false;
                }
            } else {
                $scope.counter.show = false;
                $scope.counter.text = false;
            }
        } else {
                $scope.counter.show = false;
                $scope.counter.text = false;
        }
    } else {
        $scope.counter.show = false;
        $scope.counter.text = false;
    }
    return $scope.counter = {
        show : $scope.counter.show,
        text : $scope.counter.text
    };
}

“开始”是:“YYYY/MM/DAY HH:MM:SS”

也许我的思维方式不太好，但是在列表中我有一个非常实用的计时器，它将每1到9替换为01到09，将60转换为00，可以比较2个不同的时间。

Answer 1

我认为你把事情变得有点复杂化了。我想出了一个用 angularjs 1.6.0 制作的简单的 countDown 组件(也可以使用 angularjs 旧版本的指令来完成)，它将输入日期与 现在日期。

只要不破坏日期格式，您就可以尝试输入并更改日期以查看组件上发生的更改。

Note on dates: simple way to compare dates:

var date0 = new Date("2017-09-12T14:45:00.640Z");
var date1 = new Date("2017-09-13T14:45:00.640Z");

var dateDiff = new Date(date1.getTime() - date0.getTime());
// "1970-01-02T00:00:00.000Z"

Although dateDiff looks weird, it's basically one day from the zero date 1970-01-01T00:00:00.000Z.

鉴于此，您只需让 angularjs 发挥魔法(或者可能是技巧)即可。

{{ dateDiff | date:"d \'days\' hh:mm:ss" }}

Besides, if you don't want to work with dates in the natural form of javascript, you can use angularjs-moment which provide you date and time utility from momentjs regardless of javascript dates pitfalls.

这是工作代码:

angular
  .module('app', [])
  .run(function($rootScope) {
    $rootScope.countDownToDate = new Date().addDays(2);
  })
  .component('countDown', {
    template: '{{ $ctrl.timer | date:"d \'days\' hh:mm:ss" }}',
    bindings: {
      to: '<'
    },
    controller: function CountDownCtrl($interval) {
      var $this = this;

      this.$onInit = function() {
        $interval($this.setTime, 1000);
      };

      $this.setTime = function() {
        $this.timer = new Date(new Date($this.to).getTime() - new Date().getTime());
      }
    }
  });

// bootstrap the app
angular.element(function() {
  angular.bootstrap(document, ['app']);
});

// extension to add days on date
Date.prototype.addDays = function(days) {
  var dat = new Date(this.valueOf());
  dat.setDate(dat.getDate() + days);
  return dat;
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<div>
  <center>
    <h1>
      <count-down to="countDownToDate" />
    </h1>
    <label for="countDownToDate">To Date</label>
    <input type="datetime" name="countDownToDate" ng-model="countDownToDate">
  </center>
</div>