AngularJS：在子元素上應用ngStyle

我有一個包含嵌入svg文件的ng-include的跨度。如何使用ng-style來設計svg？我想根據它的索引來設計它。AngularJS：在子元素上應用ngStyle

<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>

來源

2017-03-02 Raymond Mark Sicat

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 
}

來源

2017-03-02 06:11:20 FrankerZ

你能給我一個鏈接/教程如何做到這一點？我很欣賞這一點。謝謝！ –

在Raymond工作。 – FrankerZ

我已經知道了。謝謝您的幫助。 –

我明白了。仍然在span上添加了填充屬性，然後我爲svg放置了一個css樣式來繼承父項的填充。

.svgcont2 svg { 
    fill: inherit; 
}

來源

2017-03-02 06:27:36

雖然這可能有效，但它還要求填充範圍。雖然這可能適用於您的情況，但我的答案涵蓋了您可能不想跨度填充的情況。 – FrankerZ

AngularJS：在子元素上應用ngStyle

回答

相關問題