für Updates Zusehen in Winkelkomponenten innerhalb mehrerer Objekte verschachtelt

Question

weitergegeben

Ich habe folgende Winkelregler:

{ id: 1, shape: "rect", label: "Start", class: "in-progress", 
     subGraph: { 
       expand: true, 
       nodes: [ 
        {id: 10, shape: "rect", label: "Sub Process", class: "in-progress", 
         subGraph: { 
          expand: true, 
          nodes: [ 
           {id: 15, label: "Beginning", shape: "rect", class: "default"}, 
           {id: 16, label: "Middle", shape: "rect", class: "error"}, 
           {id: 17, label: "End", shape: "rect", class: "in-progress"} 
           ], 
          edges: [] 
         }}, 
          {id: 11, shape: "ellipse", label: "Review", class: "error"}, 
          {id: 12, shape: "ellipse", label: "Finalize", class: "default"} 
         ], 
       edges: [ 
        {from: 10, to: 11, type: "circle", label: "", dashed: false}, 
        {from: 11, to: 12, type: "diamond", label: "", dashed: false} 
        ] 
      } 
    } 

Hier ist, was die Funktion, das Updates in meinem Controller außerhalb der benutzerdefinierten Komponente zu machen:

// node being updated is passed into the function below 
function onNodeUpdated (node) { 
     for (var y = 0; y < this.nodes.length; y++) { 
      if (this.nodes[y].id === node.id) { 
        this.nodes.splice(y, 1, angular.copy(this.nodes[y])); 
        break; 
      } else if (this.nodes[y].subGraph) { 
       for (var x = 0; x < this.nodes[y].subGraph.nodes.length; x++) { 
        if (this.nodes[y].subGraph.nodes[x].id === node.id) { 
         this.nodes[y].subGraph.nodes.splice(x, 1, angular.copy(this.nodes[y].subGraph.nodes[x])); 
         break; 
        } 
       } 
      } 
     } 
    }; 

Ich übergebe Knoten in meine benutzerdefinierte Winkelkomponente wie folgt in meinem HTML:

Dann in meiner Komponente I für Updates zu diesen Knoten am beobachte, wie in meiner Link-Funktion folgt:

scope.$watchCollection("ctrl.nodes", function() { 
       renderGraph(); 
    }); 

Die oben genannten Uhren für Änderungen in dem Knoten - also verschiedene Formen der Knoten, Klassen hinzugefügt oder Knoten Etikett geändert . Wenn erkannt wird, rendert das Diagramm die Änderungen an den Knoten erneut. Dies funktioniert für die Knoten der obersten Ebene - d. H. Knoten mit der ID # 1 unten, aber nicht für verschachtelte Knoten innerhalb des Untergraphen.

Meine Frage ist, wie kann ich gehen auf Änderungen/Updates auf die verschachtelten Kanten und Knoten - alles in meinem Knoten mit der ID von 1. Ich habe kein Beispiel, das hat noch funktioniert. Alle Updates finden außerhalb der "Beispiel" -Komponente statt. Das einzige, was im Inneren des Bauteils geschieht ist die Uhr mit der neuen Anordnung von Knoten und/oder Kanten ausgelöst wird, die in vergangen

Ich habe versucht:.

scope.$watch("ctrl.nodes", function() { 
      renderGraph(); 
}, true); 

scope.$watchCollection("ctrl.nodes.subGraph.nodes", function() { 
       renderGraph(); 
}); 

Beide versucht die nie nennen $ watch innerhalb der Komponente, muss es für beide Knoten und Kantenaktualisierungen erneut rendern. Wichtiger Hinweis ist, dass ich nicht weiß, wie viele Untergraphen der Benutzer der Komponente haben wird, so dass es dynamisch sein muss, um "n" Anzahl der SubGraph-Ebenen zu berücksichtigen. Ist das möglich? Dank

Answer 1

$scope.$watch(
function(){ return ctrl.nodes }, 
function(newVal, oldVal){ 
      renderGraph(); 
}, true); 

oder

$scope.$watch(
    function(){ return ctrl.nodes.subGraph.nodes }, 
    function(newVal, oldVal){ 
       renderGraph(); 
    }, true); 

Auch wenn dieser Code in der Beispielrichtlinie Sie auf die Daten über den Anwendungsbereich der Richtlinie binden können.

Sie können mit dieser Syntax einen Beobachter auf etwas setzen. dh. Dienste etc ...