Endlosschleife beim Beobachten des Elternobjekts, Watcher aktualisiert keinen Wert

Question

Ich habe eine Direktive, die ein C3js-Diagramm generiert. Ich habe ein Objekt, das verschiedene C3-Eigenschaften enthält. Wenn das eingehende Element bereits ein Objekt chartOptions hat, wird es verwendet, wenn nicht, wird das Standardobjekt hinzugefügt.

scope.elementObject.chartOptions = scope.elementObject.chartOptions || chartOptions; 

ich für alle Änderungen auf dem chartOptions Objekt zu sehen bin versucht, weil es mit außerhalb der Richtlinie in Wechselwirkung wird jedoch einfach einen Beobachter zu schaffen, ohne irgendeine Funktionalität Hinzufügen führt zu einer Endlosschleife. Keine der regulären Endlosschleifen-Lösungen scheint zu funktionieren, weil ich scheinbar das Objekt im Beobachter nicht modifiziere.

scope.$watch('elementObject.chartOptions', function() { 
    console.log('changed') 
}, true); 
//INFINITE LOOP 

Wenn ich aber ein Kind Objekt beobachte, dann komme ich nicht in eine Endlosschleife, wie

scope.$watch('elementObject.chartOptions.data', function() { 
    console.log('changed') 
}, true); 
//NO INFINITE LOOP 

Richtlinie

app.directive('newchart', function() { 

    return { 
     scope: { 
      data: "=", 
      elementObject: "=element" 
     }, 
     restrict: 'E', 
     link: link 
    }; 
    function link(scope, elem) { 

     var el = elem[0]; 
     var chartOptions = { 
      data: { 
       columns: [['data1', 30, 200, 100, 400, 150, 250]], 
       type: 'spline', 
       labels: false 
      }, 
      interaction: { enabled: true }, 
      grid: { x: { show: false }, y: { show: false } }, 
      legend: { show: true, position: 'bottom' }, 
      tooltip: { show: true, grouped: true } 
     }; 

     scope.elementObject.chartOptions = scope.elementObject.chartOptions || chartOptions; 
     scope.elementObject.chartOptions.bindto = el; 

     var chart = c3.generate(scope.elementObject.chartOptions); 

     scope.$watch('elementObject.chartOptions', function() { 
      console.log('changed') 
     }, true);   
    }; 
}); 

Ich muß in der Lage sein, auf Änderungen an einer der Eigenschaften des Objekts chartOptions nicht nur auf Daten zu achten, wie im obigen Beispiel.

Answer 1

Ich konnte das Problem bestimmen, wurde von dieser Linie verursacht:

scope.elementObject.chartOptions.bindto = el; 

das Objekt element Argument in der Verknüpfungsfunktion ist eine jquery wrapper des DOM-Elements manipuliert wird. Einen Watcher speziell darauf zu platzieren, verursachte die Endlosschleife.

Weil ich die bindto Eigenschaft in das Optionsobjekt einbezog, gab das gesamte Objekt dann die Endlosschleife zurück, wenn es beobachtet wurde.

Von der C3js Dokumentation über bindto:

Wenn diese Option nicht angegeben ist, wird das Diagramm jedoch nicht eingestellt werden erzeugt werden. Stattdessen können wir das Element durch chart.element zugreifen und legen Sie es von uns selbst

So ist die Lösung ist nicht eine bindto Eigenschaft auf, in der Optionen-Objekt, und dann die svg in die Richtlinie erzeugte hinzufügen, indem es den Zugriff durch chart.element, wie zum Beispiel:

function link(scope, elem) { 

    ... 

    var chart = c3.generate(scope.elementObject.chartOptions); 
    elem.html(chart.element) 
}