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中的里程碑項目。