在 AngularJS 中维护指令 SVG 模板的功能

【问题标题】：Maintaining functionality of Directive SVG-Templates in AngularJS在 AngularJS 中维护指令 SVG 模板的功能
【发布时间】：2016-09-11 09:07:33
【问题描述】：

我正在 SPA 上使用 HTML SVG。

我遇到了无法在指令模板中呈现 SVG 元素的问题。我相信这是因为我的指令是 SVG 命名空间内的外来元素。

我需要解决方法才能将指令的功能与 SVG 元素一起使用。通过使 SVG 标记内的 Element-Restricted-Directive 合法或动态地将我的指令作为 Attribute-Restricted-Directive 添加到 SVG 元素。

我目前正在运行 Angularjs 1，并且在我的指令模板中使用 SVG 元素（即矩形、椭圆、g）。

我发现了一篇关于复制和删除 Directive DOM 节点并将其重新创建为 SVG 节点的堆栈溢出帖子。我不确定控制器是否仍会绑定到新节点。

链接： Rendering SVG templates in AngularJS directives

你有什么建议可以解决这个问题吗？

【问题讨论】：

标签： html angularjs svg angularjs-directive

【解决方案1】：

使用 Angularjs 1.3.0 之后的任何更高版本，在指令定义对象中，您可以将 templateNamespace 声明为 svg。然后将replace设置为true：

// ...

.directive('myDir', function() {
    return {
        restrict: 'E',
        templateNamespace: 'svg',
        template: '<ellipse rx="100" ry="33" cx="50" cy="50" fill="#00ff00" / >',
        replace: true
    }
});

这将正确呈现模板。如果没有声明 templateNamspace，则假定为 html。

附带说明，replace 已折旧但未损坏。

这方面的文档位于“templateNameplace”下：
https://docs.angularjs.org/api/ng/service/$compile

【讨论】：