AngularJS：子要素にngStyleを適用する

Question

sggファイルを埋め込むng-includeを持つスパンがあります。 ng-styleを使用してsvgのスタイルを設定するにはどうすればよいですか？私はそのインデックスに基づいてスタイルを設定したい。

<li ng-repeat="menuItem in menuItems" class="menuitem" ng-class="{'smenuitem': ($index === menuselected)}"> 
    <span class="svgcont2" 
     ng-include="menuItem.iconurl" 
     ng-style="getFill($index)"></span> 
    <span class="listtext">{{ menuItem.name }}</span> 
</li> 

Answer 1

ng-includeは、単純な「このコンテンツをここにダンプ」です。実際にはこれを達成するための方法はありません（ちょうどng-includeを使用）。私の提案は、ディレクティブを作成し、ディレクティブ内に内部スタイルを設定するsub-styleのようなディレクティブスコープ変数を添付することです。そのような

コールそれを：

<span class="svgcont2" 
      icon-url="menuItem.iconurl" 
      fill-info="getFill($index)"></span> 

あなたのディレクティブ：あなたのディレクティブのテンプレートで

app 
.directive('svgcont2', function() { 
    return { 
    restrict: 'C', 
    scope: { 
     fillInfo: '=' 
    }, 
    templateUrl: function(elem, attrs) { 
     return attrs.iconUrl 
    } 
    }; 
}); 

：

<svg style="{fill: fillInfo}"> 

もう一つの方法は、スタイルを経由してこれを行うことです。スタイルが単純な場合は、親スパン要素にクラスを追加することができます。このクラスを内側の子に伝播できます。以下の簡単なスニペットをご覧ください：

.svgcont2.fill div.childelement 
{ 
    //Your style element 
} 

Answer 2

私はそれを手に入れました。スパンにfill属性を追加した後、svgが親の塗りつぶしを継承するCSSスタイルを配置しました。