d3 SVG 中的 Angular 指令答案

【问题标题】：Angular directive within d3 SVGd3 SVG 中的 Angular 指令
【发布时间】：2015-11-02 16:58:42
【问题描述】：

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

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

<my-directive></my-directive> 是在SVG 中创建的，但控制器从不运行，并且该指令的 HTML 内容丢失。在SVG 的同级中，该指令正确呈现。

【问题讨论】：

你需要编译它

标签： javascript html angularjs d3.js svg

【解决方案1】：

从 AngularJS 1.3.0-rc.5 开始，您可以通过在 replace: true 旁边指定 templateNamespace: 'svg' 来将指令指定为 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，了解 AngularJS 项目中 SVG 支持的里程碑。

【讨论】：