角ng-href和svg xlink

Question

我想要使​​用带有角度的xml命名空间属性的一些输入.

问题是angular附带了几个指令来处理写入属性,例如当angular解析了表达式时,href和src(否则浏览器会尝试加载{{mymodel.myimage}}为url)

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

我面临的问题是我使用角度来输出svg和D3一起,因为角度无法输出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名称空间/ svg以及angular的任何建议都将非常感激.

Answer 1

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

ng-attr-xlink:href="{{xxx}}" 适合我.

请注意,您还需要一个空的xlink:href=""初始值. - Derek Hsu

Answer 2

如果像我一样,你正在寻找一种向svg添加图像的方法,你可以这样做:

xlink:href="" ng-href="{{ foo }}"

例:

http://jsbin.com/sigoleya/1/edit?html,js,output

我在哪里找到了解决方案:

https://github.com/angular/angular.js/issues/7697

Answer 3

在尝试输出xlink:href与模型绑定的值时,我遇到了类似的问题.根据用户<option>在<select>控件中选择的内容,我试图通过元素的xlink:href属性显示动态SVG图标<use>.

我在AngularJS的GitHub问题中找到了一个关于此的线索.根据那里的讨论,似乎因为存在可行的解决方法,他们通过将其移至Backlog里程碑来有效地提出修复.

最终对我有用的是受到这个JSBin的启发:

http://jsbin.com/sigoleya/1/edit?html,js,output

这是我在模板中使用的代码:

<svg class="icon" data-ng-class="category.iconName">
  <use xlink:href="" data-ng-href="{{'#' + category.iconName}}">
</svg>

给定一个category.iconName的icon-music,例如,角设置xlink:href动态地#icon-music,它引用的<svg id="icon-music">元件进一步向上在同一页上.

正如其他人所指出的那样,关键是xlink:href=""在你调用ngHref指令的元素上设置一个空白属性.属性顺序似乎并不重要.使用ng-attr-xlink:href="{{xxx}}"(如Derek Hsu的回答中提到的)对我不起作用.

所有这些都假定为Angular 1.3.36.

Answer 4

我用以下模块解决了同样的问题:

SVG模块:

var app = angular.module('Svgs', []);

angular.forEach([
    { ngAttrName: 'ngXlinkHref', attrName: 'xlink:href' },
    { ngAttrName: 'ngWidth', attrName: 'width' },
    { ngAttrName: 'ngHeight', attrName: 'height' }
], function (pair) {

    var ngAttrName = pair.ngAttrName;
    var attrName = pair.attrName;

    app.directive(ngAttrName, function (IeHelperSrv) {

        return {

            priority: 99,

            link: function (scope, element, attrs) {

                attrs.$observe(ngAttrName, function (value) {

                    if (!value) return;

                    attrs.$set(attrName, value);
                    if (IeHelperSrv.isIE) element.prop(attrName, value);
                });
            }
        };
    });
});

用于IE检测的模块:

angular.module('IeHelper', []).factory('IeHelperSrv', function () {

    return {
        isIE: checkForIE.isIE,
    }
});

var checkForIE = {
    init: function () {
        this.isIE = (navigator.userAgent.indexOf('MSIE') != -1);
    }
};

checkForIE.init();

HTML:

<!-- image has initial fake source, width and height to force it to render -->
<image xlink:href="~/Content/Empty.png" width="1" height="1"
    ng-xlink-href="{{item.imageSrc}}"
    ng-width="{{item.width}}" ng-height="{{item.height}}"
    ng-cloak
    />