在Angularjs中管理多个计数器

在我的应用程序中，我需要在同一页面上使用多个计数器。这些计数器中的每一个将从0到100％计数，返回到0，并再次计数到100％。在Angularjs中管理多个计数器

我使用间隔此使用的代码的下面简化方块

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

我试图解决的要求来完成是：

计数器的页上的量可以变化取决于DB的结果
根据事件，可以启动或停止任何特定的计数器
计数器必须独立于d被定义为便于唯一的计数间隔

我觉得最好的办法是创建一个独立的代码块，当我期望开始计数时可以执行并且可以执行停止命令的块。

我的第一次尝试是在Angular中创建一个服务。它对第一个计数器非常有用，并且解决了最后2个需求，但是由于Angular将服务作为单例处理，因此它不允许在页面上使用多个独立的计数器。

我的问题是寻找方法来解决这个问题。我已经看到了将服务创建为API的建议，但我也看到了使用指令的潜力。有没有人有建议？

来源

2016-12-04 Tom Lebeda

这是创建一个指令一个完美的地方。使用参数计数创建一个称为计数器的指令。 – Toddsden

我很欣赏这些反馈。如果我要创建一个指令，它可以通过什么方式来跟踪单独的计数器？ –

我添加了一个使用下面的指令的例子。 – Toddsden

这是一个基于指令的答案。我从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>

来源

2016-12-06 00:46:14 Toddsden

在Angularjs中管理多个计数器

回答

相关问题