[英]Can I use AngularJs Directives to apply a style to a pseudo Element
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. 我希望我不会错过一些明显的东西,但我正在努力学习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. 我正在尝试构建一个指令,它将从数据属性('background-image')获取url并将其作为背景图像应用于伪元素,但我无法弄清楚如何定位::在元素之前或者甚至Angular可以修改伪元素。
Here is the directive I am trying to build: http://cdpn.io/cqvGH 这是我想要建立的指令: http : //cdpn.io/cqvGH
I can get it to apply the background to div.item but when I try target the ::before no joy. 我可以把它应用于div.item的背景但是当我尝试在没有快乐之前瞄准::时。
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);
Working here: http://codepen.io/anon/pen/Difrt 在这里工作: http : //codepen.io/anon/pen/Difrt
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.