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..

    How to use CSS to center the buttons?

    How can I set the width of something in jquery based on variables?

    How can I change the selection text background using CSS?

    Animated HTML,CSS JavaScript. How can I implement this [closed]

    How to restore WordPress theme style,css from caches on internet

    how to change color of selected menu in css or jquery [closed]

    CSS: How to lay an image on top of a table

    How to use CSS in XML and XSL

    How to change nav text color when scrolled over other div anchors in the page

    How to reverse a jQuery animation back to original CSS properties

    How to fix the top row and first column in a webpage, with only CSS

    How do I return all CSS properties applied to an element by an external stylesheet class (not get computed styles!)?

    How to achieve the following design in css in jquery mobile

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    How do I make the whole area of a list item in my navigation bar, clickable as a link?

    How to reduce the number of sprites when using css sprite technique

    How do I solve this IE7 margin issue?

    CSS - how to trim text output?

    How to fill Frameless grid dynamically?

    How to remove space between bannner and content in wordpress theme?

    Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

    How to add pseudo element centered in a textarea?

    How to display the bottom of an image?

    How do I prevent this list from moving across the page?

    How to fix redefinition warnings from CSS Validator?

    How to apply CSS locally on any online page?

    How to align with css

    How to remove CSS underline?

    How do you read !important in CSS?

    jQuery, how can i do to toggle a margin