Angularjs 如何为ui路由器部分模板指定xml命名空间为SVG？_Angularjs_Svg_Angular Ui Router_Xml Namespaces

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

angularjs svg

Angularjs 如何为ui路由器部分模板指定xml命名空间为SVG？,angularjs,svg,angular-ui-router,xml-namespaces,Angularjs,Svg,Angular Ui Router,Xml Namespaces,在使用AngularJS和UI路由器开发web应用程序时遇到的问题，我第一次没有找到任何解决方案问题是：由SVG元素组成的部分模板没有在正确的名称空间中创建，因此没有在某些浏览器上显示-即FF、Safari（我没有在最新的IE上尝试过）。请注意，在Chrome和Opera中，如果所有元素都正确呈现，则不会出现此问题我已经能够用一个简单的例子重现这个问题：（） index.html 嵌套状态家嵌套 ng repeat中的文本在某种程度上是可以的我没有被解释为SVG 圆圈检查元素

在使用AngularJS和UI路由器开发web应用程序时遇到的问题，我第一次没有找到任何解决方案

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

我已经能够用一个简单的例子重现这个问题：（）

index.html
嵌套状态
家
嵌套
ng repeat中的文本在某种程度上是可以的
我没有被解释为SVG
圆圈

检查元素属性我发现它们具有proto：HTMLUnknownElementPrototype

在挣扎/调查过程中，我收集了一些信息：

不知何故，ng repeat似乎找到了解决直接子标签问题的方法，如我的plunkr所示
在以前的Angular版本中存在一个已知的bug，即无法在ngInclude模板中正确创建SVG节点，就像我的示例中一样。这个特定的问题似乎与名为innerHtml（我需要研究的一个概念）的东西有关，并且已经解决了。这可能就是为什么直接子对象可以正常工作的原因。我在这里疯狂地推断。。。事实是我不知道
这让我想到这个问题可能更多地与ui路由器有关，而不是它本身

任何帮助都将不胜感激，非常感谢,，

不久前，HTML5规范改变了innerHTML的工作方式，试图更好地适应SVG

UAs正在赶上技术规格的变化，Chrome是第一个这样做的，Firefox从36版开始（目前处于测试阶段，于2015年2月24日发布）将以您想要的方式运行（您的示例也将运行）。Safari和IE也可能在某个时候赶上

同时，您需要使用javascript在正确的名称空间中重新创建元素。

谢谢@RobertLongson！！比我期望的更好的回应。幸运的是我可以等。

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>