我使用大量指令来绘制和操作复杂的 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
,一个不使用。
最佳答案
改用属性匹配。从我原来的例子我改变了 <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>
关于javascript - 没有弃用替换的 AngularJS SVG 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28234496/