Javascript 角度ng点击'；动态创建的d3图表中的s不工作

我试图用一个角度指令创建一个d3图表。我设法创建了它，但问题是我想要在图表元素上出现一些ng click事件，我不确定该如何实现

这是我的指示：

.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对象创建了我的d3图表，我将ng click属性附加到图表元素上（这似乎不是一种正确的角度方式）：

d3代码工作正常，因为如果我从指令中删除编译代码，图表就会被绘制出来，但是ng点击不会触发

如果我把编译代码留在那里，它就会进入无限循环，浏览器就会积累内存，直到我不得不杀死它

---

显然，我的方法不起作用，如果有人能帮助我，那就太棒了，

，因为您正在从

CircleChart.generateGraph

内部修改DOM，并在您的指令中重新追加元素的内容：

elem.append（content）

编译后，您（可能）会进入无限循环

如果您确实想编译这样生成的模板，可以简单地调用

$compile（elem.contents（））（scope）

无需再次

清除

和

追加

内容

$compile

将在DOM上发挥作用

---

---

然而，正如我在评论中所建议的那样，由于您可以在

CircleChart

中访问整个范围（我认为这可能是一种过分的做法），您应该在

d3

中捕获单击事件，并从code中调用

getErgs

函数，而不是

$compile

-将代码和任务委托给Angular。

在

generateGraph

函数中的

svg

是什么？那是杜姆吗？另外，在我看来，从代码生成角度模板不是一个好主意。我的方法是在初始化或调用期间将回调传递给

CircleChart

，捕获d3中的click事件并通过Javascript代码调用该回调。@音乐上，我用svg创建代码更新了我的问题。我在试着理解你说的关于回电的事。你指的是我想用ng click调用的实际函数吗？如果我在指令中使用控制器的作用域，我可能可以访问它。是的，我希望您在

中调用函数
getEgs
。在（'click'，…）

上，而不是在代码中输出

ng click

。感谢您的回答，我现在设法让它工作了。我所做的是在指令

controller:'egCtrl'

中访问我的控制器，然后不是将

getEgs（）

放在控制器的

$scope

上，而是将其添加为属性，如：

this.getEgs=function（）{}

。然后就像你说的，我在上使用d3的

（'click'，…）

。

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

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