應用程序內可重複使用的AngularJS服務

Question

我對AngularJS非常陌生，因此我可能會問完全錯誤的問題。我試圖完成的是在單個應用程序中創建一個具有數據綁定功能的可重用類。下面通過一個非常簡單的例子演示了我正在嘗試完成的事情。

說我想創建一個計數器的值和增量方法。我可以創建一個服務，並使用它在控制器像這樣：

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; 
    }; 
}); 

然後我可以顯示視圖來添加計數器：如果

<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> 

這對於一個櫃檯工作正常，但我想要在同一個控制器中有多個計數器？由於該服務是單身人士，我不能這樣做。用Angular創建類似這樣的其他服務會更復雜的最佳方法是什麼？謝謝！

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

Answer 1

要使一項服務不像一個單身人士，你可以這樣做：

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(); 
     } 
    }; 
}); 

，然後從控制器管理您的櫃檯，e.g：

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

http://jsfiddle.net/KLDEZ/

Answer 2

讓您的服務支持多個計數器：

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; 
    }; 
}); 

然後：

<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> 

和綁定視圖，以任何你想要的櫃檯......