我可以使用AngularJs指令將樣式應用於僞元素

我希望我不會在這裏錯過某些明顯的東西，但我正在嘗試學習Angular，並且在嘗試製作指令時遇到了問題。我試圖建立一個指令，將從一個數據屬性（'背景圖像'），並將其作爲一個背景圖像應用到僞元素，但我無法弄清楚如何定位:: before元素，或者即使Angular可以修改僞元素。我可以使用AngularJs指令將樣式應用於僞元素

這裏是我試圖建立的指令： http://cdpn.io/cqvGH

我能得到它的背景應用於div.item但是當我嘗試目標沒有喜悅前::。

這裏是指令代碼：

angular.module('testApp', [ 
]) 

angular.module('testApp') 
    .directive('backgroundImage', function(){ 
    return function(scope, element, attrs){ 
     restrict: 'A', 
     attrs.$observe('backgroundImage', function(value) { 
     // If I remove ::before it will apply image background to .item correctly. 
     element::before.css({ 
       'background-image': 'url(' + value +')' 
      }); 
     }); 
    }; 
});

來源

2014-04-25 Daimz

這是棘手的，但有可能。嘗試是這樣的：

var style = "<style>.item:before{background-image:url("+value+")}</style>" 
angular.element("head").append(style);

在這裏工作：http://codepen.io/anon/pen/Difrt

來源

2014-04-25 12:34:31 Cherniv

哇，多數民衆贊成真棒！我只是有一個障礙，因爲現在如果我嘗試並且有多個項目不能同時具有背景圖像，則背景設置爲類.item時，該樣式不會內聯應用於元素。有沒有辦法可以做到這一點，但它有多個元素與不同的背景圖像？ – Daimz

切爾諾夫是絕對正確的，因爲我的原始問題和他的代碼創建了:: before元素，但是如果想要將圖像應用於多個項目，還可以將背景圖像應用於我已決定執行的跨度（如果有人在我耳熟能詳之前採取了一種方法來做到這一點），其他明智的鏈接將告訴你我是如何做到的。 http://cdpn.io/cqvGH – Daimz

@Daimz你可以通過添加動態和唯一的「id」來做到這一點，看看：http://codepen.io/anon/pen/enHxq – Cherniv

我可以使用AngularJs指令將樣式應用於僞元素

回答

相關問題