javascript - d3 SVG 中的 Angular 指令

Question

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

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

<my-directive></my-directive>创建于 SVG ，但 Controller 永远不会运行并且指令的 HTML 内容丢失。在 SVG 的兄弟中，指令正确呈现。

Answer 1

从 AngularJS 1.3.0-rc.5 开始，您可以通过指定 templateNamespace: 'svg' 将指令指定为 SVG旁边是replace: true。在此版本之前，对 SVG 没有真正一流的支持，如果无法从 1.2.x 升级，您会发现自己在乱搞。您还需要注入(inject)并利用 $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了解 AngularJS 项目中 SVG 支持的里程碑。