Question

在我的应用程序中，我需要在同一页面上使用多个计数器。每个计数器的计数从0到100％，回到0，再到100％。

我正在使用间隔来完成此操作，使用下面简化的代码块

$interval(function() {
   if (data[counter] < 100) {
      data[counter] = data[counter] + interval;
   } else {
      data[counter] = 0;
   }
}, 1000);

我试图解决的要求是：

页面上的计数器数量可能会因数据库
根据事件，可以启动或停止任何特定计数器
必须独立定义计数器以方便独特的计数间隔

我觉得最好的方法是创建一个独立的代码块，可以在我期望计数开始时执行，以及我可以执行stop命令的块。

我的第一次尝试是在Angular中创建一个服务。它适用于第一个计数器并解决了最后两个要求，但由于Angular处理服务作为单例，它不允许页面上有多个独立计数器。

我的问题是寻找最佳方法的方向。我已经看到了将服务创建为API的建议，但我也看到了使用指令的潜力。有人有建议吗？

Answer 1

这是基于指令的答案。我从GUI中拆分了实际的计数器。所以，你可以使用你喜欢的任何GUI。

计数器和GUI一起看起来像这样：

<counter count="counter1Count" api="counter1Api"></counter>
<counter-gui count="{{counter1Count}}" api="counter1Api"></counter-gui>

注意使用相同的变量如何将它们链接在一起。查看完整示例的代码段：

＆＃13;

    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 : "="
            }
        };
    });

＆＃13;

<!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>

＆＃13;

在Angularjs中管理多个计数器

1 个答案: