2017-05-12 1 views
0

Ich lerne AngularJS, und ich bin verloren, wie zu lösen, was eine einfache Aufgabe zu sein scheint:Angular Kommunikation zwischen mehreren Controller Richtlinie Paare

Ich möchte einen Weg für Paare von Steuerungen und Richtlinien zu kommunizieren und Speichern und teilen Sie Daten untereinander, aber werden getrennt von anderen Paaren ähnlicher Controller/Direktiven gehalten. Ich möchte eckige Dienste verwenden, weil ich viele Daten und Funktionen habe, die ich in den Dienst einfügen möchte, anstatt mich in jedem Controller zu wiederholen, aber das Problem besteht darin, dass es sich bei Diensten um Singletons handelt. Was ich will, ist mehrere injizierbare Instanzen des gleichen Dienstes. (Oder eine bessere Praxis Alternative, dies zu erreichen)

Hier ist eine Analogie

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 

Hier etwa ist das, was mein Code aussieht (es ist derzeit nur ein Singleton):

//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 
     } 
    } 
}); 
+1

Sie können Ereignisbenachrichtigungen immer verwenden, um zu kommunizieren. Zum Beispiel gibt es eine Reihe von Diensten, mit denen Sie Ereignisse "abonnieren" und "senden" können. So ein Service oder Controller und Broadcast ein bestimmtes Ereignis, dass ein anderer Service oder Controller hört und wird abholen. – Scott

Antwort

1

Dienstleistungen und Fabriken sind Singletons. Es gibt keinen Weg dahin (außer Sie möchten zu Angular 2 wechseln). Ich denke auch, dass Sie es ein wenig überdenken.

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

Jetzt haben Sie eine Fabrik, die Gärten produziert. Sie können Gärten von Ihrem Controller erstellen, und wenn Sie diese Gärten im Speicher beibehalten möchten, können Sie sie zu einer Reihe von Gärten in Ihrem Dienst hinzufügen:

Verwandte Themen