CODEWITHSUNDEEP
javascripthtmlangularjs
Michael 'Maik' Ardan
Michael 'Maik' Ardan

Reputation: 4393

AngularJS - Webpage Not Updating

I'm trying to learn AngularJS. Please bear with me.

Currently, I'm trying to create a countdown timer that would update the webpage based on the given interval.

Below is the HTML file:

<!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>

My 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);

});

Based on the console logs, the timer is working. However, the webpage values are not updating.

Upvotes: 0

Views: 57

Answers (3)

Sender
Sender

Reputation: 6858

Using $interval service you can do this. 

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);

  });
<!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>
</body>

</html>

Upvotes: 2

Bob Sponge
Bob Sponge

Reputation: 4738

Function setInterval does not triggering digest cycle.

Instead of setInterval you can use angular analog $interval:

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

Upvotes: 3

A. Romeu
A. Romeu

Reputation: 302

Use the $interval service for Angular

setInterval will not refresh angular scope of the controller

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

Upvotes: 2

Related Questions