2016-12-04 71 views
1

在我的應用程序中,我需要在同一頁面上使用多個計數器。這些計數器中的每一個將從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的建議,但我也看到了使用指令的潛力。有沒有人有建議?

+0

這是創建一個指令一個完美的地方。使用參數計數創建一個稱爲計數器的指令。 – Toddsden

+0

我很欣賞這些反饋。如果我要創建一個指令,它可以通過什麼方式來跟蹤單獨的計數器? –

+0

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

回答

0

這是一個基於指令的答案。我從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>