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

Question

我希望我不會錯過一些明顯的東西，但我正在努力學習Angular，並且在嘗試制定指令時遇到了問題。

我正在嘗試構建一個指令，它將從數據屬性（'background-image'）獲取url並將其作為背景圖像應用於偽元素，但我無法弄清楚如何定位::在元素之前或者甚至Angular可以修改偽元素。

這是我想要建立的指令： 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 +')'
            });
        });
    };
});

Answer 1

這很棘手，但可能。 嘗試類似的東西：

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

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