AngularJS：在子元素上应用 ngStyle答案

【问题标题】：AngularJS: Apply ngStyle on Child ElementAngularJS：在子元素上应用 ngStyle
【发布时间】：2017-07-21 17:47:34
【问题描述】：

我有一个包含嵌入 svg 文件的 ng-include 的 span。如何使用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>

【问题讨论】：

标签： javascript css angularjs svg

【解决方案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}">

另一种方法是通过样式来实现。如果您的样式足够简单，您可以向父 span 元素添加其他类，您可以将其传播给内部的子元素。请参阅下面的快速 sn-p：

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

【讨论】：

你能给我一个关于如何做到这一点的链接/教程吗？我真的很感激这一点。谢谢！
Raymond 的工作。
@RaymondMarkSicat 我确实添加了一个解决方案，特别是如果填充外部跨度会导致问题。
我会试试你的解决方案。谢谢！

【解决方案2】：

我明白了。仍然在 span 上添加了一个填充属性，然后我为 svg 放置了一个 css 样式以继承父级的填充。

.svgcont2 svg {
    fill: inherit;
}

【讨论】：

虽然这可能有效，但它也需要填充跨度。虽然这可能适用于您的情况，但我在下面的回答涵盖了您可能不希望跨度也被填充的情况。