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

我正在尝试向动态创建的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编译的。这意味着上下文菜单未绑定到元素

我在中添加完整的工作代码，以防您要检查：）

---

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

您可以注入$compile服务并使用它来编译#svg画布

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

签出更新的

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

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

---

您可以在这里找到它（但请注意，在这段代码中，实际上是编译了“g”元素，而不是整个svg）

GrizzlyNetch，感谢您的回复。他们都工作。然而，当我想进入菜单时，菜单消失了。你有办法解决这个问题吗？嗯……你在mouseleave事件的指令中有这个想法。检查这个：我已经注释掉了mouseleave事件处理程序：）谢谢@JakubKnejzlik，我也按照你的建议解决了我的问题