1

我有两个指令，my-svg和my-rect. 我想像这样使用它们：

    <svg my-svg>
      <my-rect/>
    </svg>

my-rect创建一个 SVGrect并my-svg创建一个svg内部包含转置矩形的节点。最后，我想要得到的是：

    <svg width='300' height='300'>
      <rect x="140" y="30" width="25" height="25" fill="red"></rect>
    </svg>

请参阅此处的示例：http: //plnkr.co/edit/UIyUtX ?p=preview

如您所见，红色矩形并未显示，即使它存在于 DOM 中。根据这个讨论，似乎没有显示矩形，因为它应该是 SVGElement 时是 HTMLElement。

正如同一个讨论中所建议的，我正在使用自定义指令编译器将 DOM 节点从 HTMLElement 类型转换为 SVGElement，但即使这在我的用例中似乎也不起作用。

我究竟做错了什么？

谢谢

4

2 回答 2

0

推杆

<g>
    <my-rect></my-rect>
</g>

将显示矩形。它没有回答你在做什么错的问题，但它确实让代码显示你想要的。我自己花了一些时间研究这个问题，但我无法让它发挥作用，因此以不同的方式解决了这个问题。您尝试使用此方法解决的问题是什么？

于 2013-09-24T05:24:03.807 回答
0

在幕后，AngularJS 使用 JQuery 或 JQLite 从模板创建要替换的元素。

JQuery 和 JQLite 都使用具有正确 SVG 命名空间的 document.createElement 而不是 document.createElementNS。

在您的指令中，您需要从 AngularJS 接管 SVG 元素的创建。

您可以将以下辅助函数注入到您的指令中：

.value('createSVGNode', function(name, element, settings) {
  var namespace = 'http://www.w3.org/2000/svg';
  var node = document.createElementNS(namespace, name);
  for (var attribute in settings) {
    var value = settings[attribute];
    if (value !== null && !attribute.match(/\$/) && (typeof value !== 'string' || value !== '')) {
      node.setAttribute(attribute, value);
    }
  }
  return node;
})

并在链接函数中使用它，而不是使用模板（外部或内联） - 例如：

link: function(scope, element, attrs) {
  var cx = '{{x}';
  var cy = '{{y}}';
  var r = '{{r}}';
  var circle = createSVGNode('circle', element, attrs);

  angular.element(circle).attr('ng-attr-cx', cx);
  angular.element(circle).attr('ng-attr-cy', cy);
  angular.element(circle).attr('ng-attr-r', r);
  element.replaceWith(circle);

  $compile(circle)(scope);
}

您可以在https://github.com/mjgodfrey83/angular-piechart/上查看此工作的示例 - 在饼图上下文中。

Angular 1.3.0-beta8 中的修复程序允许指定非 html 指令模板类型 - 请参见此处。有关使用它的示例，请查看angular-charts。

希望有帮助。

于 2014-04-27T19:52:25.923 回答