如何使用angular $ compile和d3.js来操作SVG字符串？

Question

我有一堆图标存储为字符串。我正在制定一个指令，将这些基本图标添加到DOM中，并提供一些操作选项 - 添加轮廓形状，添加/删除填充和笔划等。我的指令$观察元素的属性，相应地更新范围。我在模板中使用ng-bind-html来渲染图标。我对Angular很新，这是迄今为止我必须解决的最复杂的问题。我正在使用这样的编译：

    $compile(icon)(scope, function(e,s){
          var svg = d3.select(e).append("circle").attr("r","20");
          ...
    })[0].outerHTML)

我是在正确的轨道上吗？

JsFiddle Example