Scope Wert empfängt Update nur von einem Controller

Question

Ich habe eine Schaltfläche, box.component.js:

angular.module('box').component('box', { 
    templateUrl: 'box.template.html', 
    controller: function boxController(mainService, UiService){ 
     this.addBox = function() { 

      //Set box as selected 
      var box = mainService.selected; 
      var nodesHolder = UiService.getNodesHolder().children; 

      //Set custom properties 
      box.name = "Box"; 
      box.id = nodesHolder.length; 
      box.parameters = { 
       parm1: Math.floor((Math.random() * 10) + 1), 
       parm2: Math.floor((Math.random() * 10) + 1), 
       parm3: Math.floor((Math.random() * 10) + 1) 

      }; 
      //Push box into nodes holder array 
      nodesHolder.push(box); 
     } 
    } 
}); 

, wenn darauf geklickt es ein Objekt erstellt, die ein Feld auffüllt, mein list.component.js: (in der Ansicht als Kreise dargestellt):

angular.module('list').component('list', { 

    templateUrl: 'list.template.html', 

    controller: function nodesController(UiService) { 

     this.nodes = UiService.getNodesHolder().children; 

     this.selected = function (value) { 

      var nodes = UiService.getNodesHolder(); 

      UiService.selected = nodes.children[value]; 

     } 


    } 

}); 

und zeigt auch den Namen und die Parameter, durch parms-bar.component:

0.123.

angular.module('parms-bar').component('parmsbar', { 
    templateUrl: 'parms-bar.template.html', 
    controller: function parmsController(mainService){ 
     this.selected = mainService.selected; 
    } 
}); 

Die Kommunikation zwischen diesen Komponenten wird von zwei Diensten verwaltet. Eine, die das gewählte Objekt erfasst, main.service.js:

angular.module('app').service('mainService', function(){ 
    var selected = {}; 

    var service = { 
     get selected(){ 
      return selected; 
     }, 
     set selected(value){ 
      selected = value; 
     } 
    } 
    return service; 
}); 

und eine, die die Elemente in der Liste (der Kreise) zurück, ui.service.js:

angular.module('app').service('UiService', function(){ 

    //Nodes-holder 
    var nodesHolder = { children: []}; 

    return { 

     getNodesHolder: function() { 
      return nodesHolder; 
     } 
    }; 
}); 

Wenn ich auf einen Kreis klicke, möchte ich zu dem entsprechenden Objekt wechseln, also zeige seine Parameter an, aber das funktioniert nicht. Es scheint, dass die Parameteransicht nur vom Box-Controller aktualisiert wird. Vielleicht etwas falsch in meinem list.component.js, wo ich versuche, den Kreis als ausgewählt zu setzen?

this.selected = function (value) { 

      var nodes = UiService.getNodesHolder(); 

      UiService.selected = nodes.children[value]; 

     } 

Live example here

Answer 1

Der Punkt hier ist das Objekt gleich zu halten, gibt es zwei Dinge, was ich hier gefunden,

Erstens, da Sie das Objekt gleiche dann halten, wenn Add-Box-Funktion das gleiche Objekt läuft manipuliert wird, dass ist alle Werte im Array nimmt den Wert der letzten Änderung. Um dem entgegenzuwirken, habe ich eine neue Kopie des Box-Objekts erstellt, während ich es zum Array geschoben habe.

nodesHolder.push(angular.copy(box)); 

Zweitens in der Liste component.js Sie aktualisieren mainService.selected nicht so änderte ich

UiService.selected = nodes.children[value]; 
       to 
mainService.selected = nodes.children[value]; 

Nun stellt sich ein weiteres Problem, weil der ersten Lösung. Da mache ich eine Kopie des Objekts, den Wert, der in mainService festgelegt wird.ausgewählt ist anders als die vorherigen Wert, die darin war. So halten Sie das Objekt gleiche ich habe zwei funtions erstellt

1. function clearObject(obj){ 
     // Function that cleans up the keys of the given object 
     // without creating a new object. 
    } 

2. function copyData(obj) { 
     // Function that copies the new object data to selected. 
    } 

Schließlich ist hier die Arbeits zupfen, https://plnkr.co/edit/Tk8YstW83NKwnYtbQZnM?p=preview

Answer 2

Eigentlich, wenn u dies in objet Modell in den Datei box.component.js ändern.

box = { 
    "name": "Box", 
    "id": nodesHolder.length, 
    "parameters": { 
    "parm1": Math.floor((Math.random() * 10) + 1), 
    "parm2": Math.floor((Math.random() * 10) + 1), 
    "parm3": Math.floor((Math.random() * 10) + 1) 
    } 
} 

dann der ausgewählte Kreis, der den korrekten Wert zeigt. überprüfen Sie bitte mit console.log(UiService.selected); in der list.component.js Datei.

und einige kleinere Fehler in list.template.html Dateiänderung in <div id="list" class="list"> .Actually ist es so in Ihrem plnkr <div id="list"class"list">. Entschuldigung, ich kann so viel weiter machen nur ich brauche etwas Zeit, um es zu arbeiten.