我对AngularJS相当陌生,虽然我通常更喜欢解决我的问题,但我觉得我错过了使用AngularJS进行客户端/服务器编程的基本概念。
目前,我正在尝试让一个非常基本的应用程序作为我自己的概念证明。在这个应用程序中,我想要一个计时器,它只是从设定的时间倒计时(比如在这个例子中是 2 分钟(,然后重新启动。虽然我有计时器逻辑工作,但在尝试让计时器是全局的时遇到了麻烦,以便任何连接的客户端都会看到与启动它的用户相同的倒计时。
从最初的研究来看,我认为最好的方法是通过如下所示的服务:
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);
}
}]);
<!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>
但是,当我在浏览器上打开多个选项卡并连接到此选项卡时,它们都从不同的位置开始,而不是一个全局控制的计时器。我相信这是非常明显的,但作为一个刚接触角度/网络开发的人,我不知所措。
这应该在你的服务中控制
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;
}
}]);
使用会话、cookie 或 localStorage 有三种可能性(请注意不良做法(。 如果您有某种类型的用户,我会将计时器映射到会话,而不是让服务器处理客户端计时器的映射和获取。然后,您可以确保它的安全,并且无论用户使用什么浏览器或计算机,他都将拥有相同的计时器。