Usługa wielokrotnego użytku AngularJS w aplikacji

Question

Jestem bardzo nowa w AngularJS, więc możliwe jest, że zadaję całkowicie błędne pytanie. Próbuję to zrobić, tworząc klasę wielokrotnego użytku z powiązaniem danych w jednej aplikacji. Poniższe ilustruje, co próbuję osiągnąć na bardzo prostym przykładzie.

Powiedz, że chcę utworzyć licznik z wartością i metodą inkrementacji. Mogę stworzyć usługę i używać go w sterowniku tak:

angular.module("fiddle", ["counter"]) 
.controller("MainCtrl", function($scope, counter) { 
    $scope.counter = counter; 
}); 

angular.module("counter", []) 
.service("counter", function() { 
    this.count = 0; 
    this.increment = function(x) { 
     this.count += x; 
    }; 
}); 

Wtedy mogę wyświetlić widok, aby dodać licznik:

<h1>Count: {{counter.count}}</h1> 
<button ng-click="counter.increment(1)">Add 1</button> 
<button ng-click="counter.increment(5)">Add 5</button> 
<button ng-click="counter.increment(10)">Add 10</button> 

Działa to dobrze dla jednego licznika, ale co jeśli ja chcesz mieć wiele liczników w tym samym kontrolerze? Ponieważ usługa jest singleton, nie mogę tego zrobić. Jakie jest najlepsze podejście do tworzenia czegoś takiego z Angular, biorąc pod uwagę, że inne usługi byłyby o wiele bardziej złożone? Dzięki!

http://jsfiddle.net/jeffaudio/ExASb/

Answer 1

Aby spraw, aby usługa nie działała jak singlet, możesz to zrobić:

angular.module("counter", []) 
.service("counter", function() { 
    var aCounter = function() { 
     this.count = 0; 
     this.increment = function(x) { 
      this.count += x; 
     }; 
    } 
    return { 
     getInstance: function() { 
      return new aCounter(); 
     } 
    }; 
}); 

A potem zarządzać liczniki z kontrolera, np:

function myCtrl($scope, counter) { 
    $scope.counter1 = counter.getInstance(); 
    $scope.counter2 = counter.getInstance(); 
} 

http://jsfiddle.net/KLDEZ/

Answer 2

Złóż wasze wsparcie usługa wielokrotne liczniki:

angular.module("counter", []) 
.service("counter", function() { 
    // Counters is our object which service encapsulates 
    this.counters = {}; 
    this.increment = function(name, x) { 
     // If such counter is not set, set it. 
     if (!this.counters[name]) { this.counters[name] = 0; } 
     this.counters[name] += x; 
    }; 
}); 

, a następnie:

<button ng-click="counter.increment('count1', 1)">Add 1</button> 
<button ng-click="counter.increment('count2', 5)">Add 5</button> 
<button ng-click="counter.increment('count3', 10)">Add 10</button> 

i wiążą się widok na licznik cokolwiek chcesz ...