Dinamik olarak oluşturulmuş bir d3 grafiğinin içindeki açısal tıklama tıklanma çalışmıyor

Question

Bir Açısal yönerge kullanarak bir d3 grafiği oluşturmaya çalışıyorum. Bunu oluşturmayı başarabilirim, ama sorun şudur ki grafik elemanlarında bazı ng tıklama olayları istiyorum ve bunun nasıl yapılması gerektiğinden emin değilim.

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

CircleChart nesne benim d3 grafiği oluşturur ve ben grafik elemanlarına bir ng tıklama özelliğini eklemek yer (uygun bir Açısal yol olarak görünmüyor vardır: İşte

benim direktifi olduğunu) bunu yapmanın:

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 + "')"; 
       }) 

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

d3 kodu ben yönergesi gelen derleme kodunu kaldırmak çünkü eğer, grafik çizilmiş olur iyi çalışıyor, ancak ng tıklama ateş yoktur.

Derleme kodunu orada bırakırsam, sonsuz bir döngüye girer ve tarayıcı onu öldürene kadar bellek oluşturuyor. Açıkçası

, benim yöntem çalışmıyor ve siz içinizde elemanın içeriğini yeniden ekleme yönergesine CircleChart.generateGraph ve içinden DOM değiştirerek olduğundan kimse

Answer 1

bana yardım edebilir eğer muhteşem olacak: elem.append(content) Derleme sonrasında, muhtemelen (sonsuz) sonsuz bir döngü içinde olur.

böylece üretilen şablon derlemek istiyoruz, aşağıdakileri yapabilirsiniz içerik tekrar clear ve append gerek kalmadan basit çağrı $compile(elem.contents())(scope);. $compile, DOM yerinde yerinde Açısal büyü çalışacaktır. Eğer (Bence bir overkill muhtemelen) CircleChart bütün kapsamı erişebilir beri, Yorum önerilen Ancak

---

, sen d3 tıklama olayını yakalamak ve getErgs işlevini çağırmak gerekir koddan $compile yerine kodlama ve görevi Angular'a verme.