Question

我对AngularJS相当新，虽然我通常更愿意解决我的问题，但我觉得我错过了使用AngularJS进行客户端/服务器编程的基本概念。

目前我正在尝试将一个非常基本的应用程序作为我自己的概念证明。在这个应用程序中，我希望有一个计时器，它只是从设定的时间（例如在这个例子中2分钟）倒计时，然后重新启动。虽然我有计时器逻辑工作，但是在尝试让计时器为全局时遇到麻烦，以便任何连接的客户端都会看到与启动它的用户相同的倒计时。

从最初的研究开始，我认为最好的方法是通过以下服务：

＆＃13;

var myApp = angular.module('countdownTimer', []);


myApp.service('timerService',['$http', function($http){
	var time = 180;
	
	return {
		getTime: getTime,
		setTime: setTime
	};
	
	function getTime(){
		return  time;
	}
	function setTime(value){
		time = value;
	}
}]);

myApp.controller('CounterController', ['$timeout','$scope', 'timerService', function($timeout, $scope, timerService){
	/**$scope.counter = 180;
	**/
	var date = new Date(null);
	date.setSeconds(timerService.getTime());
	$scope.time_format = date.toISOString().substr(14,5);
	
	
	$scope.onTimeout = function() {
		timerService.setTime(timerService.getTime()-1);
		var date = new Date(null);

		date.setSeconds(timerService.getTime());
		$scope.time_format = date.toISOString().substr(14,5);
		if (timerService.getTime() > 0){
			mytimeout = $timeout($scope.onTimeout, 1000);
			
		}
		else{
			
			//$scope.counter = 180;
			timerService.setTime(180);
			date.setSeconds(timerService.getTime());
			mytimeout = $timeout($scope.onTimeout, 1000);
		}
	}
	$scope.start = function(){
		var mytimeout = $timeout($scope.onTimeout,1000);	
	}
	
	$scope.stop = function(){
		$timeout.cancel(mytimeout);
	}
	
	
}]);

＆＃13;

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Example </title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<script src="app.js"></script>
	
</head>
	
<body data-ng-app="countdownTimer">
	<div data-ng-controller="CounterController">
		{{time_format}}
		<button data-ng-click="stop()">Pause</button>
		<button data-ng-click="start()">Start</button>
	</div>
	</body>
</html>

＆＃13;

但是，当我在浏览器上打开多个标签并连接到它时，它们都从不同的位置开始，而不是一个全局控制的计时器。我确信这是非常明显的，但作为角度/网络开发新手，我不知所措。

Answer 1

这应该在您的服务中进行控制

var date = new Date(null);

以

更新您的服务

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


    this.getTime = function(){
        return  time;
    }
    this.setTime = function(value){
        time = value;
    }
}]);

Answer 2

使用会话，cookie或localStorage是三种可能性（请注意不良做法）。如果您有某种类型的用户，我会将计时器映射到会话，然后让服务器为客户端处理计时器的映射和获取。这样一来，无论您使用的是哪种浏览器或计算机，都可以确保它的安全性，并使用户拥有相同的计时器。

AngularJS - 利用服务/控制器模型为所有客户创建全局计时器

2 个答案: