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

【问题标题】：Dynamic <svg-icon> as Angular directive动态 <svg-icon> 作为 Angular 指令
【发布时间】：2018-02-17 14:19:18
【问题描述】：

我正在使用精灵中包含的 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>

基本上，我得到了相同的标记，但谷歌浏览器没有显示 SVG 元素已添加到 DOM。当使用非 Angular 方法时，它确实如此。最后，使用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());
    };
});

【问题讨论】：

标签： javascript angularjs svg

【解决方案1】：

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

是 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”变量绑定到父元素中提供的属性，然后通过数据绑定将其注入模板中，以便在父元素更新时更新。 });

【讨论】：

<svg-icon> 不是 Angular 指令——即使没有 Angular 也能正常工作。我正在使用来自glyph.smarticons.co 的图标以及链接到那里的 iconwc.js 库。
我的错！看起来它实际上是一个 Web 组件，我只是假设它是 Angular。您添加到 DOM 的方式可能不会触发 Web 组件的内容，但我不能肯定地说。
是的，WC 的东西没有被触发。使用 html() 而不是 append() 就可以了。

【解决方案2】：

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

看看这个简单的例子 svg builder 如何使用指令。

<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();
        }
    };
});

Demo Plunker

【讨论】：