AngularJS ng-href 和 svg xlink

Question

我想要一些关于使用带有 angular 的 xml 命名空间属性的意见。

问题是，当 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 命名空间/svg 和 angular 的建议将不胜感激。

Answer 1

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

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

---

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

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 值时遇到了类似的问题。基于用户在<select> 控件中选择的<option>，我试图通过<use> 元素的xlink:href 属性显示动态SVG 图标。

我在 AngularJS 的 GitHub 问题中找到了 a thread about this。根据那里的讨论，似乎因为存在可行的解决方法，他们通过将其移至积压里程碑有效地提出了修复。

最终对我有用的是这个 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>

例如，给定icon-music 中的category.iconName，Angular 会将xlink:href 动态设置为#icon-music，这会在同一页面上进一步引用<svg id="icon-music"> 元素。

正如其他人所指出的，关键是在调用ngHref 指令的元素上设置一个空白xlink:href="" 属性。属性顺序似乎无关紧要。使用 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
    />

Answer 5

对于由于 HTML5 模式下的 Angular/Angular UI 路由器而遇到此问题的任何其他人，我想出了一个简单的修复方法，使 svg sprite 图标能够与它们的 xlink:href 属性和标签一起使用。

要点在这里：https://gist.github.com/planetflash/4d9d66e924aae95f7618c03f2aabd4a3

app.run(['$rootScope', '$window', function($rootScope, $window){
 $rootScope.$on('$locationChangeSuccess', function(event){
    $rootScope.absurl = $window.location.href;
});

<svg><use xlink:href="{{absurl+'#svgvID'}}"></use></svg>

Answer 6

我在使用 Ajax 将 svg spritesheet 加载到页面上时遇到了这个问题。如果在加载 spritesheet 之前我在页面上有一个，它将失败并且一旦 spritesheet 可用就不会解决。加载 spritesheet 后添加到 dom 的任何内容都可以。我不得不推迟将项目放入 dom 直到 spritesheet 完成加载。

这只影响了 IOS。所有其他浏览器都不关心顺序。

Answer 7

这花费了我比我想要的更多的时间。大约 20-30 分钟。

如果我理解正确，图像元素上的任何失败加载都会使该元素在未来变得无用。我相信这与@GeekyMonkey 所说的类似。如果角度绑定系统最初将 xlink:href 设置为 null，则 Image 元素将不再起作用，即使我们将来有有效值也是如此。

这是解决方案，请注意我是如何使用 ng-if 指令将图像元素包裹在 g 元素中的。这确保我们仅在正确的值可用时才绑定图像。

<g ng-if="vm.svgMap.background != null">
    <image
        ng-attr-xlink:href="{{vm.svgMap.background.image | trusted}}"
        ng-attr-width="{{vm.svgMap.background.width}}"
        ng-attr-height="{{vm.svgMap.background.width}}"

        xlink:href=""

        width="1"
        height="1"
        x="0"
        y="0"></image>
</g>

正如其他人所说，属性的顺序也很重要。为了确保 angularJS 允许我们绑定图像元素，我们还必须信任该资源，我已经通过过滤器完成了它（它是 xlink:href 属性中的那个）：

(function() {
    'use strict';

    angular.module('myTool').filter('trusted', TrustedFilter);

    function TrustedFilter($sce) {
        return function(url) {
            return $sce.trustAsResourceUrl(url);
        };
    };
}());