我可以使用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指令将样式应用于伪元素

回答

相关问题