Jak utworzyć obiekt usługi, które nie dzielić swoje wartości ze sterownikami, które je spożywają

Question

Załóżmy utworzyć fabryki, usługi lub obiekt dostawcy jak tak

myApp.factory('myService', function() { 
    return { 
    counter: 0, 
    increment: function() { 
     console.log('counter: ' + (this.counter++)) 
    } 
    }; 
}); 

I przypuśćmy Mam kontroler, który zależy na nim

myApp.controller('myCtrl', function(myService) { 
    $scope.incr = function() { 
    myService.increment(); 
    }; 
} 

I zastosowanie tego kontrolera w różnych częściach html

<div ng-controller="myCtrl"> 
    <button ng-click="increment()">increment</button> 
</div> 
... 
<div ng-controller="myCtrl"> 
    <button ng-click="increment()">increment</button> 
</div> 

Teraz, gdy klikam na każdym przycisku, licznik jest uniwersalny i wynosi 0, 1, 2, 3, ...

Jak mogę napisać moją fabrykę, usługę lub dostawcę, aby każdy kontroler otrzymał inna kopia obiektu usługi?

Answer 1

Ponieważ fabryki są singletonami, musisz użyć metody w swojej fabryce, aby utworzyć usługę za każdym razem. Zmień swoje usługi, aby mieć metodę tworzenia, która zwraca swoje usługi, która robi inkrementację:

myApp.factory('myService', function() { 
    return { 
    create: function() { 
     return { 
     counter: 0, 
     increment: function() { 
      console.log('counter: ' + (this.counter++)); 
     } 
     }; 
    } 
    }; 
}); 

myApp.controller('myCtrl', function($scope, myService) { 
    var service = myService.create(); 
    $scope.incr = function() { 
    service.increment(); 
    }; 
}); 

także nazwa metody kontrolera nie pasuje do tego, co jest w widoku:

<div ng-controller="myCtrl"> 
    <button ng-click="incr()">increment</button> 
</div> 
... 
<div ng-controller="myCtrl"> 
    <button ng-click="incr()">increment</button> 
</div> 

Plunkr

Answer 2

Po prostu zmień .efactory na .service, zapewni to unikalny zakres przy każdym wstrzyknięciu.

Przyczyny tego są lepiej opisane w tej odpowiedzi: AngularJS: Service vs provider vs factory