如何在动态创建的SVG元素上编译指令

Question

我正在尝试将上下文菜单指令添加到动态创建的SVG元素中.

在AngularJS控制器中,我将svg定义如下:

var svg = d3.select("#svg-canvas").append("svg")
    .attr("width", 100)
    .attr("height", 100)
    .style("pointer-events", "all")
    .append('g');

后来,我在下面添加了一个矩形.请注意,我添加了一个"ng-context-menu"属性,我的AngularJS指令.

svg.append("rect")
.attr("x", 35)
.attr("y", 15)
.attr("width", 20)
.attr("height", 20)
.attr("ng-context-menu", "")
.style("fill", "gray");

我在加载DOM之后添加了这段代码,因此,这段代码不是用AngularJS编译的.这意味着上下文菜单没有绑定到元素.

我在JSFiddle中添加完整的工作代码,以防你想检查:)

你有什么建议让它起作用吗？我需要为它创建一个指令吗？

Answer 1

您可以注入$ compile服务并使用它来编译#svg-canvas.

$compile(angular.element('#svg-canvas'))($scope);

检查更新的JSFiddle

如果要编译任何d3元素,请使用

$compile(element[0][0])(scope)

你可以在这里找到它JSFiddle(但请注意,在这个片段实际上'g'元素是编译的,而不是整个svg)