我使用了很多指令来绘制和操作复杂的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" />'
};
})
有关两个SVG指令的示例,请参阅此plunk,其中一个使用replace: true
而另一个不使用。
答案 0 :(得分:3)
改为使用属性匹配。在我的原始示例中,我将<my-rect-non-replace></my-rect-non-replace>
更改为<g my-rect-non-replace></g>
,这会产生有效的SVG <g><rect /></g>
如果模板更复杂,我必须出于某些原因向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>