AngularJS SVG 指令没有弃用替换

Question

我使用很多指令来绘制和操作复杂的 SVG。 从 1.3.??不推荐在指令工厂中使用“替换”。我想知道如何在不使用 replace: true 的指令中构建有效的 SVG。我的指令如下所示：

angular.module('app', []).directive('myRect', function() {
  return {
    restrict: 'E',
    replace: true,
    templateNamespace: 'svg',
    template: '<rect x="20" y="20" width="100" height="50" fill="blue" />'
  };
})

请参阅此plunk，了解两个 SVG 指令的示例，一个使用 replace: true，一个不使用。

Answer 1

改为使用属性匹配。从我的原始示例中，我将<my-rect-non-replace></my-rect-non-replace> 更改为<g my-rect-non-replace></g>，这会导致有效的SVG <g><rect /></g>

plnkr

如果模板更复杂，出于某些原因，我必须为 svg 元素添加结束标记。否则包含的代码会搞砸。

<g>
<!-- Don't do this:
<line x1="-15" x2="15" y1="-25" y2="-25" />
--> 
<line x1="-15" x2="15" y1="-25" y2="-25" ></line>
<rect fill="white" width="16" height="50" x="-8" y="-25" ></rect>
<line x1="-15" x2="15" y1="25" y2="25" ></line>
</g>