Question

我正在使用使用d3渲染图形的库。为简单起见，我在下面的示例中仅使用了d3。

此示例为svg元素和重新呈现SVG的双向数据绑定设置单击事件。它还尝试使用svg foreignobject来包含html，这很好，因为我可以使用html模板（我不是svg guru）。

我努力了解在两个图书馆之间开展活动的最佳方式。我试图弄清楚如何使用ng-指令编译模板代码，但是我读过的所有示例都没有使用svg，并且不清楚角度如何处理从外部插入的模板。我可以使用与事件推广相同的方法，就像我在d3中点击＆＃39;标准html onclick =元素的监听器，但感觉有点像黑客。

以下是我的$ scope.data更改时重新创建的d3更新。 ng-click似乎没有被编译。我还查看了$ interpolate，但它只插入了varriables并且不处理元素。

svg.selectAll('foreignObject').data(data.nodes).enter()
    .append('foreignObject')
    .attr("width", 250)
    .attr("height",40)
    .attr("x", 250)
    .attr("y",function(node, index){return index * rh + rp;})
    .style("font", "14px 'Helvetica Neue'")
    .html(function(node){
        var html = '<div style="background: lightgrey"><a href=# onclick="myClick('+node.id+')"> my click</a>FOOOO<a href="#" ng-click="doClick()">ng-click</a>'+node.label+'</div>';

        var compiled = $compile(html)(scope);
        element.append(compiled);
        return html; 
    })

我的问题是：我只是使用onclick，还是应该继续尝试弄清楚如何让$ compile工作？

完整示例

http://codepen.io/anon/pen/ogPxrV

angularjs d3.js和动态模板编译

0 个答案: