在我的应用程序中，我需要在同一页面上使用多个计数器。每个计数器都会从 0 计数到 100%，再计数到 0，然后再计数到 100%。
我使用间隔来使用下面的简化代码块来完成此操作
$interval(function() {
if (data[counter] < 100) {
data[counter] = data[counter] + interval;
} else {
data[counter] = 0;
}
}, 1000);
我试图解决的要求是:
- 页面上的计数器数量可能会根据数据库的结果而变化
- 根据事件，可以启动或停止任何特定计数器
- 必须独立定义计数器，以实现唯一的计数间隔
我认为最好的方法是创建一个独立的代码块，可以在我期望计数开始时执行，并创建一个可以执行停止命令的代码块。
我的第一次尝试是在 Angular 中创建一个服务。它对于第一个计数器效果很好，并解决了最后两个要求，但是由于 Angular 将服务视为单例，它不允许页面上有多个独立的计数器。
我的问题是寻找解决此问题的最佳方法的方向。我已经看到了将服务创建为 API 的建议，但我也看到了使用指令的潜力。有人有推荐吗？
最佳答案
这是基于指令的答案。我将实际计数器与 GUI 分开。因此，您可以使用任何您喜欢的 GUI。
计数器和 GUI 一起看起来像这样:
<counter count="counter1Count" api="counter1Api"></counter>
<counter-gui count="{{counter1Count}}" api="counter1Api"></counter-gui>
注意如何使用相同的变量将它们链接在一起。查看完整示例的代码片段:
var app = angular.module('myApp',[]);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.counter1Api={};
}]);
app.directive('counterGui',function(){
return {
restrict: 'E',
template : '<h1>{{count}}</h1>' +
'<button ng-click="api.start()" class="btn btn-default" type="button">Start</button>' +
'<button ng-click="api.stop()" class="btn btn-default" type="button">Stop</button>' +
'<button ng-click="api.reset()" class="btn btn-default" type="button">Reset</button>',
scope: {
count : "@",
api : "="
}
};
});
app.directive('counter',function(){
return {
restrict: 'E',
controller: ['$scope','$interval', function myCounterController($scope,$interval) {
var intervalPromise= null;
reset();
function reset() {
$scope.count= 0;
console.log("reset",$scope.count);
}
function start() {
// Make sure the timer isn't already running.
if (!intervalPromise){
intervalPromise= $interval(function() {
if ($scope.count < 100) {
$scope.count++;
} else {
$scope.count = 0;
}
}, 1000);
}
}
function stop() {
if (intervalPromise) {
$interval.cancel(intervalPromise);
intervalPromise = null;
}
}
$scope.api={
reset : reset,
start : start,
stop : stop
};
}],
scope: {
count : "=",
api : "="
}
};
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Counter Example</title>
<!-- AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<h1>Counter 1</h1>
<counter count="counter1Count" api="counter1Api"></counter>
<counter-gui count="{{counter1Count}}" api="counter1Api"></counter-gui>
<h1>Counter 2</h1>
<counter count="counter2Count" api="counter2Api"></counter>
<counter-gui count="{{counter2Count}}" api="counter2Api"></counter-gui>
<h1>Counter 3</h1>
<p>Two GUIs displaying the same counter.</p>
<counter count="counter3Count" api="counter3Api"></counter>
<counter-gui count="{{counter3Count}}" api="counter3Api"></counter-gui>
<counter-gui count="{{counter3Count}}" api="counter3Api"></counter-gui>
</div>
</body>
</html>关于javascript - 在 Angularjs 中管理多个计数器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40961450/