动态创建的 d3 图表内的 Angular ng-click 不起作用

我正在尝试使用 Angular 指令创建 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 属性（这似乎不是正确的 Angular 执行方式）：

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 代码工作正常，因为如果我从指令中删除编译代码，则会绘制图表，但 ng-clicks 不会触发。

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

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

由于您正在从内部修改 DOMCircleChart.generateGraph并在您的指令中重新附加元素的内容：elem.append(content)编译后，您（可能）最终陷入无限循环。

如果您确实想编译由此生成的模板，您可以简单地调用$compile(elem.contents())(scope);无需clear and append再次内容。$compile将在 DOM 上发挥 Angular 的魔力in-place.

但是，正如我在评论中建议的那样，因为您可以访问中的整个范围CircleChart（在我看来这可能是一种矫枉过正），你应该捕获点击事件d3并调用getErgs来自代码的函数而不是$compile- 编写代码并将任务委托给 Angular。