如何创建一个不与使用它的控制器共享其值的服务对象

Question

假设我像这样创建一个工厂、服务或提供者对象

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

假设我有一个依赖它的控制器

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

并且我在 html

的不同部分应用了这个控制器

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

现在，当我点击每个按钮时，计数器是通用的，它会变为 0、1、2、3，...

如何编写我的工厂、服务或提供者，以便每个控制器获得服务对象的不同副本？

Answer 1

由于工厂是单例，因此您每次都需要在工厂中使用一种方法来创建您的服务。将您的服务更改为具有创建方法，returns 您的服务执行递增：

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

此外，控制器方法名称与视图中的名称不匹配：

<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

只需将 .factory 更改为 .service，这将在您每次注入时提供一个唯一的范围。

这个答案中更好地描述了其原因：AngularJS: Service vs provider vs factory

如何创建一个不与使用它的控制器共享其值的服务对象

How to make a service object that doesn't share its values with controllers that consume it

angularjs

angularjs-service

angularjs-factory

angularjs-provider