Question

我有一个包含嵌入svg文件的ng-include的span。如何使用svg设置ng-style的样式？我想根据它的索引来设置它。

<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是一个简单的＆＃34;将此内容转储到此处＆＃34;。实际上没有办法（仅使用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元素添加其他类，您可以将其传播到其中的子元素。请参阅下面的快速摘录：

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

Answer 2

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

.svgcont2 svg {
    fill: inherit;
}

AngularJS：在子元素上应用ngStyle

2 个答案: