动态创建的d3图表中的角度ng-click不起作用

Question

我正在尝试使用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.

如果我把编译代码留在那里,它会进入无限循环,浏览器正在构建内存,直到我必须杀死它.

显然,我的方法不起作用,如果有人可以帮助我,它会很棒

Answer 1

因为您正在从内部修改DOM CircleChart.generateGraph并在您的指令中重新附加元素的内容:elem.append(content)在编译之后,您(可能)最终处于无限循环中.

如果你想编译这样生成的模板,你可以简单地调用$compile(elem.contents())(scope);而不必再次clear和append内容.$compile将在DOM 上就地使用Angular魔法.

但是,正如我在评论中所建议的那样,因为你可以访问整个范围CircleChart(我认为这可能是一种矫枉过正),你应该捕获click事件d3并getErgs从代码调用函数而不是$compile代码和委托Angular的任务.