计时器未在 AngularJS 中绑定 DOM 值

Question

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

我几乎尝试了所有方法，从将它传递到函数中，使用 $interval、setInterval 等等。主要原因是我无法获取其循环的值，并绑定到我的 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 旧版本的指令来完成），它将输入日期与now 日期进行比较。

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

日期注意事项：比较日期的简单方法：

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"

虽然dateDiff看起来怪怪的，但基本上是从零日期1970-01-01T00:00:00.000Z开始的一天。

鉴于此，您只需让 angularjs 发挥作用（或者可能是技巧）。

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

此外，如果您不想使用 javascript 的自然形式的日期，您可以使用 angularjs-moment，它为您提供来自 momentjs 的日期和时间实用程序，无论 javascript 日期陷阱如何。

这是工作代码：

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>