Bir Uygulamada Yeniden Kullanılabilir AngularJS Hizmeti

Question

AngularJS için çok yeniyim, bu yüzden tamamen yanlış soruyu soruyorum. Yapmaya çalıştığım şey, tek bir uygulamada veri bağlama özelliği olan yeniden kullanılabilir bir sınıf oluşturmak. Aşağıda, çok basit bir örnekle gerçekleştirmeye çalıştığım şey gösterilmektedir.

Değeri ve artım yöntemiyle bir sayaç oluşturmak istediğimi varsayalım. Ben bir hizmet oluşturmak ve böylece gibi bir denetleyici içinde kullanabilirsiniz: bir sayaç eklemek Sonra bir görünüm görüntüleyebilir

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

: eğer

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

Bu, bir sayaç için çalışıyor peki ya Aynı denetleyicide birden fazla sayaç var mı? Hizmet tek kişilik olduğu için bunu yapamam. Diğer hizmetler çok daha karmaşık olacağını göz önüne alındığında, Angular ile böyle bir şey yaratmak için en iyi yaklaşım nedir? Teşekkürler!

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

Answer 1

için Tek bir servis gibi davranmayan bir servis yapın, bunu yapabilirsiniz:

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

Ve sonra, denetleyicinizdeki adresinin sayaçlarını yönetmek örn:

meraktan

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

http://jsfiddle.net/KLDEZ/

Answer 2

olun servis desteği birden sayaçlar: o zaman

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

Ve:

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

Ve istediğini sayaç görünümü bağlamak ...