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:

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

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

• javascript
• jquery
• html
• css
• angularjs

1 Answer 1

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