角度指定としての動的<svg-icon>

Question

私は以下のようにスプライトに含まれるSVGアイコンを使用しています。

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

そして、それは私が角度指令にそれを書き換える際に正常に動作し、まだ：

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

ダミアンは、この答えが間違っていることを指摘しているが、私は同じ間違いを犯して誰を防ぐためにそれを残しておきます！

< SVG-アイコン>はとても角度のロジックをトリガしませんjQueryのを使用して、それを追加し、あなただけの何も残されている、角度指令ではなくネイティブのHTML要素です。角度の1.xと一般的に

（あなたが1.1を使用していると仮定すると？）、あなたはそれを入力に基づいてアイコンを作成するテンプレートのフィールドを与える必要があります：

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 builder with directivesを動作させるかを見てください。

<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