Wie ein Dienstobjekt zu machen, die nicht ihre Werte mit den Controllern nicht teilt, die es konsumieren

Question

Nehmen wir an, ich eine Fabrik, eine Dienstleistung oder Provider-Objekt wie so

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

Und wenn ich einen Controller haben, hängt auf sie

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

Und ich wenden sie diesen Regler in verschiedenen Teilen des html

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

Gerade jetzt, wenn ich auf jede Taste klicke, ist der Zähler universal und es geht 0, 1, 2, 3, ...

Wie kann ich meine Fabrik, Service oder Provider schreiben, so dass jeder Controller einen bekommt verschiedene Kopie des Serviceobjekts?

Answer 1

Da Fabriken Einzelwerke sind, müssen Sie in Ihrer Fabrik eine Methode verwenden, um jedes Mal Ihren Service zu erstellen. Ändern Sie Ihren Dienst eine create-Methode zu haben, die Ihren Dienst zurück, der das Inkrementieren tut:

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

Auch die Controller-Methode Name übereinstimmen nicht zu dem, was in der Ansicht ist:

<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

Ändern Sie einfach .factory in .service. Dadurch wird bei jeder Injektion ein eindeutiger Bereich angezeigt.

Die Gründe dafür sind besser in dieser Antwort beschrieben: AngularJS: Service vs provider vs factory