问题描述
我想要一些有关将XML命名空间属性与angular一起使用的信息.
I'd like some input on using xml namespaced attributes with angular.
问题是angular附带了一些指令,用于在angular分析了表达式后处理诸如href和src之类的书写属性(否则浏览器将尝试将{{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)
https://github.com. com/angular/angular.js/blob/master/src/ng/directive/booleanAttrs.js#L329
我面临的问题是我正在使用angular来与D3一起输出svg,并且由于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一起处理xml名称空间/svg的建议将不胜感激.
Any suggestions on how to best handle xml namespaces / svg together with angular would be greatly appreciated.
推荐答案
您可以使用ng-attr-<some attribute>
ng-attr-xlink:href="{{xxx}}"
为我工作.
请注意,您还需要一个空的xlink:href=""
作为初始值. –徐熙re
Note that you also need an empty xlink:href=""
as initial value. – Derek Hsu
这篇关于AngularJS ng-href和svg xlink的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!