Question

我正在尝试创建一个angular（1.5.5）指令，其中模板是一个svg元素。我读了这个answer和其他几个，但是我无法显示我的简单svg元素。我试图尽可能地简化它。因此，当在svg元素中使用时，这个简单的指令应绘制一个圆，至少这是我想要实现的。

app.directive("svg01", () => {
    return {
        templateNamespace: "svg",
        template: `
            <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="green" />
        `
        //template: `
        //  <svg width="100" height="100">
        //      <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="white" />
        //  </svg>
        //`
    }
});

这不显示带有此html的圆圈

<div style="height: 100px; background-color: lightgreen">
    <svg width="100" height="100">
        <svg01></svg01>
    </svg>
</div>

如果相反我改变指令以包含svg元素，那么它显示（因为这现在是我假设的html元素）

app.directive("svg01", () => {
    return {
        templateNamespace: "svg",
        //template: `
        //  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="green" />
        //`
        template: `
            <svg width="100" height="100">
                <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="white" />
            </svg>
        `
    }
});

<div style="height: 100px; background-color: lightgreen">
    <svg01></svg01>
</div>

如果我将templateNamespace设置为“html”或“svg”并不重要。它显示在任何一种情况下。

是否无法在指令中定义svg模板，而是需要按照this answer

中的建议以编程方式添加它

我错过了什么？

由于

Answer 1

啊 - 我发现了问题，我会将此作为答案发布而不是修改我的问题，添加替换：true 并显示形状

app.directive("svg01", () => {
    return {
        replace: true,
        templateNamespace: "svg",
        template: `
            <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="yellow" />
        `

如何创建AngularJs svg指令

1 个答案: