AngularJS ng-href 和 svg xlink [英] AngularJS ng-href and svg xlink

问题描述

我想要一些关于将 xml 命名空间属性与 angular 一起使用的意见.

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

问题是，当 angular 解析表达式时，angular 带有几个指令来处理诸如 href 和 src 之类的写入属性(否则浏览器将尝试加载 {{mymodel.myimage}}作为网址)

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)

https://github.com/angular/angular.js/blob/master/src/ng/directive/booleanAttrs.js#L329

我面临的问题是我使用 angular 将 svg 与 D3 一起输出，并且由于 angular 无法输出 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 与 angular 的任何建议将不胜感激.

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

推荐答案

可以使用ng-attr-

ng-attr-xlink:href="{{xxx}}" 对我有用.

请注意，您还需要一个空的 xlink:href="" 作为初始值.– 德里克·许

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

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