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.
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.
Here is the directive I am trying to build: http://cdpn.io/cqvGH
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);
Working here: http://codepen.io/anon/pen/Difrt
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.