Angolare ng-click all'interno di un grafico d3 creato dinamicamente non funziona

Question

Sto provando a creare un grafico d3 usando una direttiva Angolare. Riesco a crearlo, ma il problema è che voglio degli eventi con ng-clic sugli elementi del grafico e non sono sicuro di come dovrebbe essere fatto.

Qui è la mia direttiva:

.directive('circleChart', function($parse, $window, $compile) { 
     return { 
      restrict: 'A', 
      scope: { 
       datajson: '=' 
      }, 
      link: function(scope, elem, attrs) { 

       var circleChart = new CircleChart(scope.datajson); 
       circleChart.initialise(scope); 
       var svg = circleChart.generateGraph(); 
       svg = angular.element(svg); 

       console.log(svg); 
       //scope.$apply(function() { 
        var content = $compile(svg)(scope); 
        elem.append(content); 
       //}); 
      } 
     } 
    }); 

L'oggetto CircleChart crea mia tabella d3 e c'è il posto allego un attributo ng-click agli elementi del grafico (non sembra essere un modo angolare corretta di farlo):

var CircleChart = Class.create({ 
    initialise: function(scope) { 
     this.datajson = scope.datajson; 
    }, 

    generateGraph: function() { 

    ............. 

    var chartContent = d3.select("div#chart-content"); 

    var svg = chartContent.append("svg") 
     .attr("id", "circle") 
     .attr("width", diameter) 
     .attr("height", diameter) 
     .style("border-radius", "50px") 
     .append("g") 
     .attr("transform", "translate(" + diameter/2 + "," + diameter/2 + ")"); 

     ............... 

      var circle = svg.selectAll("circle") 
       .data(nodes) 
       .enter().append("circle") 
       .attr("class", function(d) { 
        return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; 
       }) 
       .attr("id", function(d) { 
        return d.id; 
       }) 
       .attr("value", function(d) { 
        return d.name 
       }) 
       .attr("parent", function(d) { 
        if (d.parent) return d.parent['id'] 
       }) 
       .attr("ng-click", function(d) { 
        return "getEgs('" + d.id + "')"; 
       }) 

    ............... 

il codice d3 sta lavorando bene, perché se tolgo il codice di compilazione dalla direttiva, il grafico viene disegnato, ma i NG-click non sparano.

Se lascio il codice di compilazione lì, entra in un ciclo infinito e il browser sta accumulando memoria finché non devo ucciderlo.

Ovviamente, il mio metodo non funziona e sarà impressionante se qualcuno mi può aiutare

Answer 1

Dal momento che si sta modificando il DOM dall'interno del CircleChart.generateGraph e ri-aggiungendo i contenuti dell'elemento in voi DIRETTIVA: elem.append(content) dopo la compilazione, tu (probabilmente) finisci in un ciclo infinito.

Se si vuole compilare il modello così prodotto, è possibile semplice chiamata $compile(elem.contents())(scope); senza dover clear e append nuovo il contenuto. $compile funzionerà con la magia angolare sul DOM sul posto.

---

Tuttavia, come ho suggerito nei commenti, in quanto si ha accesso a tutto il settore in CircleChart (che a mio parere è probabilmente un peso inutile), si dovrebbe catturare l'evento click in d3 e richiamare la funzione getErgs dal codice anziché $compile -ingendo il codice e delegando l'attività a Angular.