As I continue my journey to learn Angular, a roadblock has appeared while trying to create a directive.
My goal is to construct a Directive that extracts the URL from a data-attribute ('background-image') and uses it as a background-image for a pseudo element. However, I am struggling to comprehend how to target the ::before element or if Angular has the ability to modify a pseudo element.
Here is a reference to the directive I'm attempting to develop:
I have succeeded in applying the background to div.item, but targeting the ::before has proven challenging.
Below is the code snippet of the directive:
angular.module('testApp', [
])
angular.module('testApp')
.directive('backgroundImage', function(){
return function(scope, element, attrs){
restrict: 'A',
attrs.$observe('backgroundImage', function(value) {
// When I remove ::before, the image background applies correctly to .item.
element::before.css({
'background-image': 'url(' + value +')'
});
});
};
});