计时器未绑定 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
    };
}

'begin' 是：'YYYY/MM/DAY HH:MM:SS'

可能是我的思路不太好，反正我有一个非常实用的定时器，可以把每一个1到9替换成01到09，把60换成00，可以比较2个不同的时间。

Answer 1

我认为你把事情复杂化了一点。我想出了一个简单的 countDown 组件，它是在 angularjs 1.6.0 中制作的（它也可以通过 angularjs 旧版本的指令来完成），它将输入日期与 now 日期进行比较.

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

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>

计时器未绑定 AngularJS 中的 DOM 值

Timer not binding DOM value in AngularJS

javascript

angularjs

recursion

timer

countdown