angularjs – 如何使用不与使用它的控制器共享其值的服务对象

发布时间：2020-12-17 17:38:51 所属栏目：安全来源：网络整理

导读：我们假设我创建了一个工厂,服务或提供者对象 myApp.factory('myService',function() { return { counter: 0,increment: function() { console.log('counter: ' + (this.counter++)) } };}); 假设我有一个依赖它的控制器 myApp.controller('myCtrl',function(

我们假设我创建了一个工厂,服务或提供者对象

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

如何编写工厂,服务或提供程序,以便每个控制器获取服务对象的不同副本？

解决方法

由于工厂是单身,您需要在工厂中使用一种方法来创建您的服务.更改您的服务以使用create方法返回执行递增的服务：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!