在 Angularjs 指令中包含 SVG 模板 [英] Including SVG template in Angularjs directive

问题描述

这是我的指令

module.directive('testrect', function() {返回 {限制:'E'，模板:'<rect top="20" left="20" height="10" width="10" style="fill: #ff00ff"/>',替换:真};});

但这就是元素在浏览器中最终的样子.填写两次不是错字.

<rect top="20" left="20" height="10" width="10" style="fill: #ff00ff;fill: #ff00ff"></rect>

这是一个 jsfiddle http://jsfiddle.net/RG2CF/

是我试图做的事情是不可能的还是我做错了什么?

谢谢

我应该补充一点，这个问题可能与模板 svg rect 的命名空间为 xhtml 而不是 svg 的事实有关，但我不确定如何将它或命名空间强制回 svg，如果这才是真正的解决方案.

解决方案

有一个 templateNamespace 属性可以设置为 svg:

module.directive('testrect', function() {返回 {限制:'E'，模板命名空间:'svg'，模板:'<rect .../>',替换:真};});

这是文档的链接.

<div ng-app="testrectApp">
<svg>
    <rect height="10" width="10" style="fill: #00ff00" />
    <testrect />
</svg>
</div>

And this is my directive

module.directive('testrect', function() {
    return {
        restrict: 'E',
        template: '<rect top="20" left="20" height="10" width="10" style="fill: #ff00ff" />',
        replace: true
    };
});

But this is what the element ends up looking like in the browser. The fill twice is not a typo.

<rect top="20" left="20" height="10" width="10" style="fill: #ff00ff;fill: #ff00ff"></rect>

Here's a jsfiddle http://jsfiddle.net/RG2CF/

Is what I'm trying to do not possible or am I doing something wrong?

Thanks

EDIT: I should add that the issue may have to do with the fact that the template svg rect is namespaced to xhtml instead of svg, but I'm unsure of how I can force this or namespace it back to svg, if that is actually the solution.

解决方案

There is a templateNamespace property you can set to svg:

module.directive('testrect', function() {
    return {
        restrict: 'E',
        templateNamespace: 'svg',
        template: '<rect .../>',
        replace: true
    };
});

Here is a link to the documentation.

这篇关于在 Angularjs 指令中包含 SVG 模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！