强制 AngularJS 在 html 端重新加载更新的值答案

【问题标题】：Forcing AngularJS to reload updated value on html end强制 AngularJS 在 html 端重新加载更新的值
【发布时间】：2017-07-19 13:54:10
【问题描述】：

我有一个计时器，我正在编写它作为我在 AngularJS 中的第一个应用程序。我一直在尝试自学角度，但我相信我的模型设置方式可能存在根本性的脱节。虽然我可以通过我的 console.log 打印输出在 Web 控制台中看到更新的值，但 html 端的计时器似乎没有更新。

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>

正如您在上面的示例中看到的，网页上的计时器没有更新。我的逻辑是否存在脱节（我是 Angular 新手，所以我很想知道我哪里出错了）还是我完全误解了 Angular 功能？

谢谢

【问题讨论】：

从您的代码中我可以看出，myDateObject 没有任何更新，您需要一个可以更新此值的代码，但您的逻辑设计看起来不太可能这样做
同意@codtex。我花了很多时间试图让它围绕您现有的代码工作，但它似乎不太可行。考虑重构一下，以便 myDateObject 可以根据服务更改在控制器中更新。

标签： javascript html angularjs controller dynamic-programming

【解决方案1】：

首先，在 getPrettyTime 你需要做：

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

否则你会得到一个浮点数。

之后，您需要在每次更新时间时调用 getPrettyTime 函数，因此您可以在 onTimeout 函数中执行此操作，如下所示：

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

这是一个有效的 sn-p ：

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>

【讨论】：

谢谢！我只是自己弄清楚了这一点，并打算发布一个类似的解决方案，但您的解决方案似乎更加优雅！干杯。
@sudobangbang 您还应该考虑使用 $interval 而不是 $timeout docs.angularjs.org/api/ng/service/$interval