AngularJS ng-href和svg xlink

Question

我想要一些有关将XML命名空间属性与angular结合使用的信息。

问题是angular附带了一些指令，用于在angular分析了表达式后处理诸如href和src之类的书写属性（否则浏览器将尝试将其加载{{mymodel.myimage}}为url）

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

我面临的问题是我正在使用angular与D3一起输出svg，并且由于angular没有办法输出，xlink:href所以我被卡住了。

我创建了一个自定义指令，输出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图像将无法呈现。

任何有关如何最好地与xml一起处理xml名称空间/ svg的建议将不胜感激。

Answer 1

您可以使用 ng-attr-<some attribute>

ng-attr-xlink:href="{{xxx}}" 为我工作。

请注意，您还需要一个空xlink:href=""值作为初始值。–徐熙re