Forcing AngularJS to reload updated value on html end

Question

I have a timer that I am writing as my first application in AngularJS. I have been trying to teach myself angular but I believe there may be a fundamental disconnect in how I have my model set up. Although I can see the updated values in the web console via my console.log print outs, the timer on the html side is not appearing to update.

var myApp = angular.module('countdownTimer', []);


myApp.service('timerService',['$http','$timeout', function($http, $timeout){
	var time = 180;
	var self = this;

	this.getPrettyTime = function(){
		var minutes = time/60;
		var seconds = time - minutes * 60;
		if (seconds < 10){
			myDateObject.date = minutes + ":0" + seconds;	
		}
		else{
			myDateObject.date = minutes + ":" + seconds;
		}
		return myDateObject;
	}
	
	var myDateObject = {
		date: null
	}
	var onTimeout = function() {
		time = time - 1;
		if (time > 0){
			console.log(time);
			mytimeout = $timeout(onTimeout, 1000);
			
		}
		else{
			time = 180;			
			mytimeout = $timeout(onTimeout, 1000);
		}
	}
	this.start = function() {
		
		$timeout(onTimeout, 1000);
	}

	
}]);

myApp.controller('CounterController', ['$timeout','$scope', 'timerService', function($timeout, $scope, timerService){
	/**$scope.counter = 180;
	**/
	//var date = new Date(null);
	//date.setSeconds(timerService.getTime());
	$scope.myDateObject = timerService.getPrettyTime();
	
	
	$scope.start = function(){
		timerService.start();
	
	}
	
	$scope.stop = function(){
		$timeout.cancel(mytimeout);
	}
	
	
}]);

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Example </title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
	<script src="app2.js"></script>
</head>
	
<body data-ng-app="countdownTimer">
	<div data-ng-controller="CounterController">
		{{myDateObject.date}}
		<button data-ng-click="stop()">Stop</button>
		<button data-ng-click="start()">Start</button>
	</div>
	</body>
</html>

As you can see in the example above, the timer is not updating on the webpage. Is there a disconnect in my logic (I am new to angular so I would love to learn where I went wrong) or am I misinterpreting angular functionality altogether?

Thanks

From your code I can tell that nothing is updating myDateObject, you need a code that will update this value, but your logic design doesn't look promising to do it — codtex
– codtex, Commented Jul 19, 2017 at 14:17
Agreed with @codtex. I spent a good amount of time trying to make it work around your existing code but it doesn't seem very feasible. Look into restructuring a bit so that myDateObject can be updated in the controller based upon service changes. — Kevin
– Kevin, Commented Jul 19, 2017 at 14:18

JeanJacques · Accepted Answer · 2017-07-19 14:25:13Z

1

First, in getPrettyTime you need to do :

var minutes = Math.floor(time/60);

Else you will get a float number.

After that you need to call your getPrettyTime function every time your time is updated, so you can do this in your onTimeout function like this :

var onTimeout = function() {
    time = time - 1;
    self.getPrettyTime();
    ...

Here is a working snippet :

var myApp = angular.module('countdownTimer', []);


myApp.service('timerService', ['$http', '$timeout', function($http, $timeout) {
  var time = 180;
  var self = this;

  self.getPrettyTime = function() {
    var minutes = Math.floor(time / 60);
    var seconds = time - minutes * 60;
    if (seconds < 10) {
      myDateObject.date = minutes + ":0" + seconds;
    } else {
      myDateObject.date = minutes + ":" + seconds;
    }
    return myDateObject;
  }

  var myDateObject = {
    date: null
  }
  var onTimeout = function() {
    time = time - 1;
    self.getPrettyTime();
    if (time > 0) {
      console.log(time);
      mytimeout = $timeout(onTimeout, 1000);

    } else {
      time = 180;
      mytimeout = $timeout(onTimeout, 1000);
    }
  }
  this.start = function() {

    $timeout(onTimeout, 1000);
  }


}]);

myApp.controller('CounterController', ['$timeout', '$scope', 'timerService', function($timeout, $scope, timerService) {
  /**$scope.counter = 180;
   **/
  //var date = new Date(null);
  //date.setSeconds(timerService.getTime());
  $scope.myDateObject = timerService.getPrettyTime();


  $scope.start = function() {
    timerService.start();

  }

  $scope.stop = function() {
    $timeout.cancel(mytimeout);
  }


}]);

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title> Example </title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
  <script src="app2.js"></script>
</head>

<body data-ng-app="countdownTimer">
  <div data-ng-controller="CounterController">
    {{myDateObject.date}}
    <button data-ng-click="stop()">Stop</button>
    <button data-ng-click="start()">Start</button>
  </div>
</body>

</html>

answered Jul 19, 2017 at 14:25

JeanJacques

1,7501 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sudobangbang Over a year ago

Thank you! I just figured this out myself and was going to post a similar solution but yours seems much more elegant! Cheers.

Daniel W. Over a year ago

@sudobangbang You should also consider using $interval instead of $timeout docs.angularjs.org/api/ng/service/$interval

Collectives™ on Stack Overflow

Forcing AngularJS to reload updated value on html end

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related