Question

我正在努力学习AngularJS。请耐心等待。

目前，我正在尝试创建一个倒数计时器，根据给定的时间间隔更新网页。

以下是HTML文件：

<!DOCTYPE html>
<html ng-app="timer_module">
<head>
  <meta charset="utf-8"></meta>
  <link rel="stylesheet" href="https://bootswatch.com/superhero/bootstrap.min.css"></link>
</head>

<body ng-controller="TimerController as controller">

  {{"D:" + controller.days + " H:" + controller.hours + " M:" + controller.minutes + " S:" + controller.seconds}}

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
  <script src="js/timer-module.js"></script>
</body>

</html>

我的JS：

angular.module("timer_module", [])
.controller("TimerController", function() {

  var target_date = new Date('Jan, 31, 2017').getTime();

  var days = 0;
  var hours = 0;
  var minutes = 0;
  var seconds = 0;
  var controller = this;

  setInterval(function() {
      var currentDate = new Date().getTime();
      var secondsLeft = (targetDate - currentDate) / 1000;

      days = parseInt(secondsLeft / 86400);
      secondsLeft = secondsLeft % 86400;

      hours = parseInt(secondsLeft / 3600);
      secondsLeft = secondsLeft % 3600;

      minutes = parseInt(secondsLeft / 60);
      seconds = parseInt(secondsLeft % 60);

      controller.days = days;
      controller.hours = hours;
      controller.minutes = minutes;
      controller.seconds = seconds;

      console.log(controller.days);
      console.log(controller.hours);
      console.log(controller.minutes);
      console.log(controller.seconds);
      console.log("---------------------");
  }, 1000);

});

根据控制台日志，计时器正在运行。但是，网页值未更新。

Answer 1

功能setInterval不会触发digest cycle。

您可以使用角度模拟$interval：

代替setInterval

  $interval(function() {
      // skipped
  }, 1000);

Answer 2

使用Angular的$ interval服务

setInterval不会刷新控制器的角度范围

https://docs.angularjs.org/api/ng/service/$interval

Answer 3

使用$interval服务，您可以执行此操作。

＆＃13;

$('#myCollapsible').collapse({
  toggle: false
});

＆＃13;

angular.module("timer_module", [])
  .controller("TimerController", function($interval) {

    var target_date = new Date('Jan, 31, 2017').getTime();

    var days = 0;
    var hours = 0;
    var minutes = 0;
    var seconds = 0;
    var controller = this;

    $interval(function() {
      var currentDate = new Date().getTime();
      var secondsLeft = (target_date - currentDate) / 1000;

      days = parseInt(secondsLeft / 86400);
      secondsLeft = secondsLeft % 86400;

      hours = parseInt(secondsLeft / 3600);
      secondsLeft = secondsLeft % 3600;

      minutes = parseInt(secondsLeft / 60);
      seconds = parseInt(secondsLeft % 60);

      controller.days = days;
      controller.hours = hours;
      controller.minutes = minutes;
      controller.seconds = seconds;

      console.log(controller.days);
      console.log(controller.hours);
      console.log(controller.minutes);
      console.log(controller.seconds);
      console.log("---------------------");
    }, 1000);

  });

＆＃13;

AngularJS - 网页未更新

3 个答案: