角度NG-href和SVG的XLink [英] angular ng-href and svg xlink

问题描述

我想使用XML命名空间中具有角属性的一些输入。

I'd like some input on using xml namespaced attributes with angular.

问题是角配有一对夫妇的指令来处理写属性，如href和SRC时角度解析了前任presssions（否则，浏览器将尝试加载 {{为MyModel。 MYIMAGE}} 作为URL）

The problem is angular comes with a couple of directives to handle writing attributes such as href and src when angular has parsed the expresssions (otherwise the browser will try to load {{mymodel.myimage}} as a url)

<一个href=\"https://github.com/angular/angular.js/blob/master/src/ng/directive/booleanAttrs.js#L329\">https://github.com/angular/angular.js/blob/master/src/ng/directive/booleanAttrs.js#L329

我现在面临的问题是，我使用的角度输出SVG连同D3和自角度没有办法输出的XLink：HREF 我被卡住了。

The problem I'm facing is that I'm using angular to output svg together with D3 and since angular doesn't have a way to output xlink:href I was stuck.

我创建的输出XLink的自定义指令：HREF

I created a custom directive that outputs xlink:href

app.directive('ngXlinkHref', function () {
  return {
    priority: 99,
    restrict: 'A',
    link: function (scope, element, attr) {
      var attrName = 'xlink:href';
      attr.$observe('ngXlinkHref', function (value) {
        if (!value)
          return;

        attr.$set(attrName, value);
      });
    }
  };
});

完整的示例： http://plnkr.co/edit/cMhGRh

但似乎如果我不手动添加的XLink：HREF的元素，SVG图像将不会呈现

But it seems that if I don't manually add xlink:href to the element, the svg image will not render.

有关如何最好地处理XML命名空间的任何建议/ SVG与角加起来将大大AP preciated。

Any suggestions on how to best handle xml namespaces / svg together with angular would be greatly appreciated.

推荐答案

您可以使用 NG-attr-＆LT;有的属性＆GT;

NG-ATTR-的XLink：HREF ={{XXX}}对我的作品

请注意，您还需要一个空的的XLink：HREF =作为初始值。 - 德里克许

Note that you also need an empty xlink:href="" as initial value. – Derek Hsu

这篇关于角度NG-href和SVG的XLink的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！