我有一个包含嵌入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>
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元素添加其他类,您可以将其传播到其中的子元素。请参阅下面的快速代码段:
.svgcont2.fill div.childelement
{
//Your style element
}
我知道了。仍然在span上添加了一个fill属性,然后我为svg放置了一个css样式来继承父级的填充。
.svgcont2 svg {
fill: inherit;
}