Service für mehrere Zähler

Question

Ich bin ein wenig auf einem Projekt fest (sehr neu mit AngularJS). Gerade jetzt, mein HTML ist:

<button ng-click="decrement()" class="min">-</button> 
<input ng-model="counter" type="text" size="1"> 
<button ng-click="increment()" class="plus">+</button> 

und mein (Arbeits-) JS:

ngToggle.controller('ExampleController', ['$scope', function($scope) { 
$scope.image=1; 
$scope.decrement=function() { 
    if ($scope.counter>1) {$scope.counter--;}  
}; 
$scope.increment=function() { 
    $scope.counter++; 
} 
}]); 

Dadurch entsteht ein einfacher Zähler mit + und - Tasten. Ich habe jetzt die Situation, wo ich mehrere unabhängige Zähler will. In meinem Kopf könnte der zählende Teil leicht mit einem Service behandelt werden, also muss ich mich nicht wiederholen. Aber was ist der richtige Ansatz hier?

Answer 1

Offensichtlich ist Ihre Frage ziemlich offen und es wird zahlreiche Antworten geben, die Ihnen helfen könnten. Ich habe ein kurzes Beispiel mokiert, in dem ein Dienst das Inkrementieren und Dekrementieren mehrerer Zähler behandelt - es ist möglicherweise nicht für Ihr genaues Szenario geeignet, aber es wird hoffentlich zeigen, wie ein Dienst verwendet werden könnte.

http://jsfiddle.net/Lvc0u55v/3763

function counterService() { 
    var counters = [0, 0, 0, 0]; 

    return { 
     getCounters: getCounters, 
     decrement: decrement, 
     increment: increment 
    }; 

    function getCounters() { 
     return counters; 
    } 

    function increment(i) { 
     if (angular.isDefined(counters[i])) 
      counters[i]++; 
    } 

    function decrement(i) { 
     if (angular.isDefined(counters[i])) 
      counters[i]--; 
    } 
} 

Dies ist der Service. Alles, was Sie davon wegnehmen müssen, ist, dass der Zustand der Zähler im Dienst lebt und die Funktionen, mit denen sie interagieren, ebenfalls vom Dienst bereitgestellt werden.