AngularJS：在指令中排除SVG元素

我感兴趣的是通过组合包装在Angular.js指令中的可重用图形元素来构建复合SVG。例如，我可能有：

<div ng-app="svgApp">
  <canvas>
    <drawing ng-repeat="i in [1,2,3]" cy="{{i * 40}}"></drawing>
  </canvas>
</div>

然而，我似乎不希望在任何地方都使用它，我希望尽可能地将解决方法保留在bug的本地，直到它被修复为止

我的问题是，以下措施是否合理：

angular.forEach(['circle', ...], function (svgElem) {

  svgModule

    .directive(svgElem, function (createSVGNode) {
      return {
        restrict: 'E',
        link: function(scope, element, attrs) {
          var node = createSVGNode(svgElem, element, attrs);
          angular.element(node).append(element[0].childNodes);
          element.replaceWith(node);
        }
      };
    });

});

这在我看来是有效的

---

以这种方式重新定义现有SVG元素指令对我有效吗

如果您无法将代码升级到AngularJS 1.3的活动开发技巧，则上述方法是一种可能的方法，因为在AngularJS 1.3中，消除不同名称空间（如SVG或MathML）的元素是一个问题

链接的示例演示了如何使用修复程序更新代码。该键是在指令定义对象中添加的新“templateNamespace”键：

  .directive('svgInternal', function () {
    return {
      templateNamespace: 'svg',
      template: '<g><rect height="25" width="25" /><text x="30" y="20">Hello, World</text></g>',
      restrict: 'E',
      replace: true
    };
  })

指令（'svgInternal'，函数（）{
返回{
templateNamespace:'svg'，
模板：“你好，世界”，
限制：'E'，
替换：正确
};
})

其中，以下标记演示了正在使用的SVG type指令：

  <svg height="30">
    <svg-internal></svg-internal>
  </svg>

---

编辑：“类型”自1.3.beta.19版起更改为“templateNamespace”。

谢谢您的回答。我对您的plunkr有问题，

嵌入SVG容器中的SVG片段（固定）

和

转换中的SVG（固定）

不显示SVG矩形。好的，

类型

已重命名

模板名称空间

请参见1.3之前的内容，将模板包装在

中。SVG元素可以嵌套。

  .directive('svgInternal', function () {
    return {
      templateNamespace: 'svg',
      template: '<g><rect height="25" width="25" /><text x="30" y="20">Hello, World</text></g>',
      restrict: 'E',
      replace: true
    };
  })

  <svg height="30">
    <svg-internal></svg-internal>
  </svg>