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找到它（但请注意，在这段代码中实际上是编译了＆＃39; g＆＃39;元素，而不是整个svg）

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

1 个答案: