几个控制器指令对之间的角度通信答案

【问题标题】：Angular communication between several controller directive pairs几个控制器指令对之间的角度通信
【发布时间】：2017-05-12 19:41:02
【问题描述】：

我正在学习 AngularJS，但我不知道如何解决看似简单的任务：

我希望控制器和指令对能够相互通信、存储和共享数据，但要与其他成对的类似控制器/指令分开。我想使用角度服务，因为我有很多数据和功能我想放入服务中，而不是在每个控制器中重复自己，但问题是服务是单例的；我想要的是同一服务的几个可注入实例。（或实现此目的的更好的实践替代方案）

这是一个类比

A class is doing a science project about growing plants. 
Students are grouped into pairs. (a controller and a directive)
Each pair is assigned a garden (an instance of the service).
Every garden comes with tools + money for seeds (functions + data-fetchers on the service)
The students must be told where their respective gardens are (injecting the service) 
One of the students must buy and plant the seeds (the controller)
The other must maintain those seeds via watering and weeding (the directive) 
Every pair of students must work independently from other pairs

我的代码大致如下（目前只有一个单例）：

//Garden service
//This is only a single service. 
//I want a factory that produces these services, which I can then inject
angular.module('foo').service('garden', function(){
    this.seeds = [];

    this.buySeeds = function(seedsToBuy) { //go to store };
    this.plantSeeds = function (){...};
    this.shovel = function(){...};
    this.water = function(){...};
    this.pesticides = function(){...};
});

//Controller student
angular.module('foo').controller("controllerStudent", function($garden){
    garden.buySeeds(['tree', 'cantelope', 'cactus']);
    garden.shovel();
    garden.plantSeeds();
    garden.water();
});

//Directive student
angular.module('foo').directive("directiveStudent", function($garden){
    return {
        scope: {},
        link: function(scope, elem, attrs){
            garden.water();
            garden.shovel();
            garden.pesticides();
            //The garden is then presented by rendering it on the elem
        }
    }
});

【问题讨论】：

您可以随时使用事件通知进行交流。例如，有许多服务允许您“订阅”和“广播”事件。因此，一个服务或控制器广播另一个服务或控制器正在侦听并将接收的某个事件。

标签： angularjs service factory

【解决方案1】：

服务和工厂是单例的。没有办法解决这个问题（除非你想切换到 Angular 2）。我也觉得你想多了。

app.factory('GardenFactory', function() {
  function Garden() {
    this.seeds = [];

    this.buySeeds = function(seedsToBuy) { //go to store };
    this.plantSeeds = function (){...};
    this.shovel = function(){...};
    this.water = function(){...};
    this.pesticides = function(){...};
  }

  function newGarden() {
    return new Garden();
  }

  return {
    newGarden: newGarden
  }
});

现在您有一家生产花园的工厂。您可以从控制器创建花园，如果您想将这些花园持久保存在内存中，您可以将它们添加到服务中的花园数组中：

// get student ID from route xx.com/students/1
app.controller('StudentCtrl', function(GardenFactory, GardenService, studentId) {
  var $ctrl = this;

  // find students garden or create new one
  $ctrl.garden = GardenService.gardens.find(function(g) {
    return g.id == studentId;  //conditional to associate garden with student
  }

  if (!garden) {
    $ctrl.garden = GardenFactory.newGarden();
    GardenService.gardens.push($ctrl.garden);  //semi-persist to service
  }

  function doStuffToGarden() {
    $ctrl.garden.buySeeds(['tree', 'cantelope', 'cactus']);
    $ctrl.garden.shovel();
    $ctrl.garden.plantSeeds();
    $ctrl.garden.water();
  }

}

app.service('GardenService', function() {
  var GardenService = this;
  GardenService.gardens = [];  //semi-persistent list of gardens
}

【讨论】：