我可以使用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