複数のカウンタを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つの要件を解決しましたが、角度処理サービスはシングルトンとして扱い、ページ上に複数の独立したカウンターを配置することはできませんでした。

私の質問は、これに最も近いアプローチ方法を探しています。私はサービスをAPIとして作成することの推奨を見てきましたが、ディレクティブを使用する可能性も見ています。誰か推奨事項はありますか？

出典

2016-12-04 Tom Lebeda

これは、ディレクティブを作成するのに最適な場所です。パラメータcountを持つcounterというディレクティブを作成します。 – 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で管理する

答えて

関連する問題