如何为ui路由器部分模板指定xml命名空间是SVG？

我还没有找到任何解决方案来解决我在使用AngularJS和UI路由器开发Web应用时遇到的问题。如何为ui路由器部分模板指定xml命名空间是SVG？

问题：由SVG元素组成的部分模板没有在正确的名称空间内创建，因此不会在某些浏览器上显示 - 即FF，Safari（我没有在最新的IE上试过）。请注意，在所有元素都正确呈现的Chrome或Opera中不会出现此问题。

我已经能够用简单的Plunkr重现问题：（http://plnkr.co/edit/u3mfJD9I2EuZ6wbfl4B6）。

index.html 
<body> 
    <h1>nested States</h1> 
    <div ui-view="home"></div> 
</body> 

home 
<svg height="500px" width="500px"> 
    <g ui-view="nested"></g> 
</svg> 

nested 
<g ng-repeat="x in [1,2,4,5]"> 
    <text x="50" y="{{50*x}}">text in ng repeat is somehow OK</text> 
    <g ui-view="circle"></g> 
</g> 
<g> 
    <text x="10" y="15">I am not interpreted as SVG</text> 
</g> 

circle 
<circle r="10" cx="30" ng-attr-cy="{{50*x}}"></circle>

检查元素的属性，我发现他们有原：HTMLUnknownElementPrototype

有几件事情我收集一边挣扎/调查：

莫名其妙NG-重复似乎找到解决这一问题的办法为它的直接儿童标签，如我的plunkr所示。
在以前的Angular版本中有一个已知的bug，在这个版本中，在ngInclude模板中SVG节点不会被正确创建，就像在我的例子中一样。这个特定的问题似乎与innerHtml（我需要研究的一个概念）有关，并且已经修复。这可能是ngRepeat直接让孩子正常工作的原因。我疯狂地在这里推断......事实是我不知道。
这使我想到这个问题可能更多地与ui-router相比，而不是角本身。

任何帮助将不胜感激，非常感谢， J.

来源

2015-02-11 jorafali

的HTML 5规范的innerHTML改变工作就在不久前，试图更好地适应SVG的方式。

UA正在赶上规范的变化，Chrome是第一个做的，Firefox将从36版开始（目前处于Beta版，2015年2月24日发布）以您想要的方式工作（以及您的示例将工作）。在某些时候，Safari和IE也可能会迎头赶上。

与此同时，您需要使用JavaScript来重新创建正确的命名空间中的元素。

来源

2015-02-11 22:20:16

Thanks @RobertLongson !!甚至比我期待的还要好。幸运的是我可以等。 – jorafali 2015-02-11 23:52:56

如何为ui路由器部分模板指定xml命名空间是SVG？

回答

相关问题