How to reload a css background-image inside a directive


Tags: javascript,css,angularjs

Problem :

In Angular, I have directive that loads a background-image attribute. How do I get the background image to reload on demand?

app.directive('profilePhotoPreview', function () {
    return {
        restrict: "A",
        scope: {
            uuid: "="
        },
        template: "",
        link: function (scope, element, attrs) {
            scope.$watch('uuid', function (value) {
                console.log('profilePhotoPreview ',value);
                if (scope.uuid) {
                    scope.preview = "url('"+conf.s3 + "user_profile_photos/" + scope.uuid + ".jpg')";

                    var s={'width':'400px', 'height':'400px','background-image': scope.preview}
                    element.css(s);
                }

            })

        }
    }
});

In this scenario, the underlying photo has been changed (ie a new profile photo has been uploaded), but the url is the same.

I've tried setting a $watch on the uuid variable and flipping its value from null back to its old value to fool Angular into re-rendering the css, but this has no effect.



Solution :

In this case browser has already cached that image. To reload it you can add '?xxxx' to image url, where 'xxxx' is a random string.

I mean you only need to change your scope.preview variable when you want to reload pic:

scope.preview = "url('"+conf.s3 + "user_profile_photos/" + scope.uuid + ".jpg?"+getRandomInt(0, 10000)+")";

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

    CSS Howto..

    Working with a css3 key frame slide effect but cant figure out how to configure correctly.. Fiddle included

    Basic CSS: When applying effects to images in CSS, how do you exclude the banner image?

    how to select a class which is children of many elements

    Symfony2 Form Type - how to set form CSS class as attribute?

    How to target element which have spaces in it's class name css?

    CSS: How to specify a min-width on a table?

    how to fill div with full height of page in css? (page is taller than 100%) for ajax loading gif background

    How to center webpage content

    How to change color and background of whole web site

    inline svg - how to apply browser default styles to xhtml in foreignObject?

    How do I resize a div relative to browser window size?

    How to have a background image wider than the content area of a website (without scrollbars)

    how to place content to the right of the fixed img with css 100% height (no width given)

    how to apply css to a particular asp.net table?

    How to add fade in and fade out when changing between texts in javascript

    how to stop CSS animation without javascript

    Show bottom of an overflow string in a div with fixed height/width?

    How to set a (nice) linear-gradient from any color to transparent?

    How to overlay two fonts with css

    How to customize bootstrap css when using bootstrap-sass [closed]

    How to attach a CSS stylesheet to FXML?

    How do I fit text into footer margins

    links are showing up on each line, instead of inline

    How to do a “true” carbon fiber CSS background

    How do I edit the VIM Omni Completion so that all CSS properties do not end in a colon?

    how to make layers not overlap with each other in css [closed]

    how to append an icon to an input search?

    How to automatically resize the wrapper div using CSS

    How to generate regular CSS file from SASS?

    How to correct css for IE?