Come rendere un oggetto servizio che non condivide i suoi valori con i controller che consumano

Question

Supponiamo creo una fabbrica, di servizio, o di un oggetto fornitore in questo modo

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

E supponiamo di avere un controller che dipende su di esso

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

E applico questo controllore in diverse parti del html

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

Al momento, quando clicco su ciascun pulsante, il contatore è universale e passa a 0, 1, 2, 3, ...

Come posso scrivere la mia fabbrica, servizio o fornitore in modo che ogni controller ottenga un copia diversa dell'oggetto di servizio?

Answer 1

Poiché le fabbriche sono singleton, è necessario utilizzare un metodo in fabbrica per creare il servizio ogni volta. Cambiare il vostro servizio per avere un metodo create che restituisce il servizio che fa l'Incrementale:

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

anche il nome del metodo di controllo non corrisponde fino a ciò che è nella vista:

<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

Basta cambiare .factory in .service, questo fornirà un ambito univoco ogni volta che lo si inietta.

Le ragioni di questo sono meglio descritti in questa risposta: AngularJS: Service vs provider vs factory