我可以使用AngularJs指令将样式应用于伪元素 [英] Can I use AngularJs Directives to apply a style to a pseudo Element

问题描述

我希望在这里我不会错过任何明显的东西，但我正在尝试学习Angular，并且在尝试制作指令时遇到了问题。

I hope I'm not missing something obvious here but I am trying to learn Angular and I have run in to a problem whilst trying to make a directive.

我正在尝试构建一个指令，它将从一个数据属性（'background-image'）中获取url并将其作为背景图像应用于伪元素，但我无法确定如何定位:: before元素，或者即使Angular可以修改一个伪元素。

I am trying to build a Directive that will take the url from a data-attribute ('background-image') and apply that as a background-image to a pseudo element, but I am having trouble figuring out how to target the ::before element or even if Angular can modify a pseudo element.

这里是我正在尝试构建的指令：
http://cdpn.io/cqvGH

Here is the directive I am trying to build: http://cdpn.io/cqvGH

我可以把它应用到div.item的背景，但是当我尝试目标::之前没有喜悦。

I can get it to apply the background to div.item but when I try target the ::before no joy.

以下是指令代码：

Here is the directive code:

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 +')'
            });
        });
    };
});

推荐答案

这很棘手，但可行。尝试如下：

It is tricky , but possible. Try something like:

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

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

这篇关于我可以使用AngularJs指令将样式应用于伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！