d3中的角度指令SVG

Question

是否可以在d3 SVG中包含Angular指令？

node.append("foreignObject") 
    .attr("width", 100) 
    .attr("height", 100) 
    .append("xhtml:my-directive") 

<my-directive></my-directive>在SVG创建，但从未控制器运行，缺少指令的HTML内容。在SVG的兄弟中，指令正确呈现。

Answer 1

从AngularJS 1.3.0-rc.5开始，您可以通过指定templateNamespace: 'svg'和replace: true并指定您的指令为SVG。在此版本之前，SVG没有真正的一流支持，如果无法从1.2.x上移，您会发​​现自己正在窃取。您还需要注入并利用$compile服务来附加动态指令。观察下面的简单示例...

<svg id="mysvg"> 
    <rect height="100" width="100" fill="dodgerblue"></rect> 
</svg> 

---

.controller('ctrl', function($scope, $compile) { 

    var node = angular.element(document.getElementById('mysvg')); 
    node.append($compile('<my-directive></my-directive>')($scope)) 
}) 
.directive('myDirective', function() { 
    return { 
     templateNamespace: 'svg', 
     template: '<rect height="10" width="100" fill="tomato"></rect>', 
     replace: true, 
     link: function(scope, elem, attrs) { 
      console.log('linked'); 
     } 
    } 
}); 

JSFiddle Link - 工作演示v.1.3.0

您还可以检查出一些project discussion here为SVG支持AngularJS中的里程碑项目。