动态 <svg-icon> 作为Angular指令

Question

我正在使用精灵中包含的SVG图标，如下所示。

<div class="py-3">
    <svg-icon><src href="sprite.svg#si-glyph-bullet-checked-list"/></svg-icon>
    <span>Tasks</span>
</div>

它工作正常，但是当我将其重写为Angular指令时：

app.directive('ngxTileIcon', function () {
    return function (scope, element, attrs) {
        var tileIcon = attrs['ngxTileIcon'];
        var tileCaption = element.text();
        element.text('');
        element.addClass('py-3');
        element.append(
            $('<svg-icon/>').append(
                $('<src/>').attr('href', 'sprite.svg#si-glyph-' + tileIcon)
            ),
            $('<span/>').text(tileCaption)
        );
    };
});

并使用它：

 <div ngx-tile-icon="bullet-checked-list">Tasks</div>

基本上，我得到的标记是相同的，但是Google Chrome浏览器不会显示SVG元素已添加到DOM中。 当使用非角度方法时，它可以。 最后，当使用Angular指令时，不显示图标。

---

解决了

我只是改变了方法-而不是将标记添加到元素，而是直接将其内容替换为html() 。 现在它可以按预期工作了。

app.directive('ngxTileIcon', function () {
    return function (scope, element, attrs) {
        var tileIcon = attrs['ngxTileIcon'];
        var tileCaption = element.text();
        var $tempDiv = $('<div/>');
        element.addClass('py-3');
        $tempDiv.append(
            $('<svg-icon/>').append(
                $('<src/>').attr('href', 'sprite.svg#si-glyph-' + tileIcon)
            ),
            $('<span/>').text(tileCaption)
        );
        element.html($tempDiv.html());
    };
});

Answer 1

达米安（Damian）指出这个答案是错误的，但我会保留它，以防止其他人犯同样的错误！

<svg-icon>是Angular指令，而不是原生HTML元素，因此使用jQuery添加它不会触发Angular的逻辑，您一无所获。

通常，对于Angular 1.x（假设您使用的是1.x？），应该给它一个模板字段，该字段将根据输入创建图标：

app.directive( "myDirective", function() {
   return {
      template: "<div class='py-3'><svg-icon><src href='sprint.svg#si-glyph-{{ tileIcon }}'></src></svg-icon></div>"
      scope: {
         tileIcon: "<"
      }
   };
});

这应将“ tileIcon”变量绑定到父元素中提供的属性，然后通过数据绑定将其注入模板中，以便在父元素更新时更新。 }）;

Answer 2

它不是您要问的，但可以帮助您解决问题。

看看这个简单的示例，如何使用指令创建svg生成器。

<button>
   <my-icon   
          icon="arrow_left"  
          size="18" 
          style="fill:#37393B;"></my-icon>
</button>  

指示：

app.directive('myIcon', function () {
    var shapes = {
        'arrow_left':
                'viewBox="-358 231.3 125 133"  >' +
                '<rect x="-342.8" y="262.7" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 -315.0274 678.5285)"  width="89.5" height="22.6"/>' +
                '<rect x="-342.8" y="309.9" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -736.0015 337.5721)"  width="89.5" height="22.6"/>' +
              '</svg>'
              //, other svgs
    };

    return {
        restrict: 'E',
        link: function (scope, element, attr) {

            var icon, size;
            var render = function () {
                    icon = attr.icon;
                    var ss = icon.match(/ic_(.*)_([0-9]+)px.svg/m);
                    if (ss !== null) {
                        icon = ss[1];
                        size = ss[2];
                    }

                // size
                if (attr.size !== undefined)
                    size = attr.size;
                else if (size !== null)
                    size = 24;

                // render
                element.html('<svg xmlns="http://www.w3.org/2000/svg"  width="' + size + '" height="' + size + '" x="0px" y="0px" ' + shapes[icon]);
            };
            render();
        }
    };
});

演示柱塞