动态创建的d3图表中的角度ng-click不起作用 [英] Angular ng-click's inside a dynamically created d3 chart are not working

问题描述

我正在尝试使用Angular指令创建d3图表。我设法创建它，但问题是我想在图表元素上有一些ng-click事件，我不确定应该怎么做。

I'm trying to create a d3 chart using an Angular directive. I manage to create it, but the problem is that I want some ng-click events on the chart elements and I'm not really sure how this should be done.

这是我的指令：

.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方式）：

The CircleChart object creates my d3 chart and there is the place I attach an ng-click attribute to the chart elements (doesn't seem to be a proper Angular way of doing it):

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。

The d3 code is working fine because if I remove the compile code from the directive, the chart gets drawn, but the ng-clicks don't fire.

如果我把编译代码留在那里，它会进入一个无限循环，浏览器正在构建内存，直到我不得不杀死它。

If I leave the compile code there, it goes into an infinite loop and the browser is building up memory until I have to kill it.

显然，我的方法不是工作，如果有人可以帮助我，那将是很棒的

Obviously, my method is not working and it will be awesome if someone can help me out

推荐答案

因为您要从 CircleChart.generateGraph 中修改DOM并在指令中重新附加元素的内容： elem.append（content）编译后，你（可能）最终会进入无限循环。

Since you are modifying the DOM from inside the CircleChart.generateGraph and re-appending the contents of the element in you directive: elem.append(content) after compilation, you (probably) end up in an infinite loop.

如果你想要编译这样生成的模板，你可以简单地调用 $ compile（elem.contents（））（scope）; 而不必清除和再次附加内容。 $ compile 将在DOM 就地上运行Angular魔法。

If you do want to compile the template thus produced, you can simple call $compile(elem.contents())(scope); without having to clear and append the content again. $compile will work Angular magic on the DOM in-place.

但是，正如我在评论中所建议的那样，因为您可以访问 CircleChart 中的整个范围（我认为这可能是一种过度杀伤力），你应该在 d3 中捕获click事件，并从代码而不是 getErgs 函数> $ compile -ing代码并将任务委托给Angular。

However, as I suggested in the comments, since you have access to the whole scope in CircleChart (which in my opinion is probably an overkill), you should capture the click event in d3 and invoke the getErgs function from code instead of $compile-ing the code and delegating the task to Angular.

这篇关于动态创建的d3图表中的角度ng-click不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！