element.css in Angular Directive not updating the element's css

Question

So I've written a custom directive to change a user's profile picture when they upload a new one. It watches for a change to the photo url and supposedly sets the element's background image to the new one upon a change.

Everything is working UNTIL the element.css() calls. For some reason, it seems to just be skipping those.

    client.directive('myDirective', function(){
    return {
        scope: { profilePhoto: '=myDirective' },
        link: function(scope, element, attrs){
            scope.$watch("profilePhoto",function(newValue,oldValue) {
                console.log(newValue) //This logs the correct value
               var url = newValue;
             if (!url) url = "../img/profile_default.png"
             element.css({
                'background-image': 'url(' + url +')', //never updates
                'background-size': 'cover',
                'background-repeat': 'no-repeat'
             })
            })
        }
    }
});

What's going on?

EDIT: Note that the background-image IS set correctly the first time through the code, but when I step through in a debugger, it's as if it's not even executed when the $watch variable changes.

can you provide a working fiddle?

Filippo oretti
– Filippo oretti

2015-08-12 14:41:50 +00:00
Commented Aug 12, 2015 at 14:41 — Filippo oretti
– Filippo oretti, Commented Aug 12, 2015 at 14:41
I created a punkr and everything works how it should.

Paul Georg Podlech
– Paul Georg Podlech

2015-08-14 08:56:25 +00:00
Commented Aug 14, 2015 at 8:56 — Paul Georg Podlech
– Paul Georg Podlech, Commented Aug 14, 2015 at 8:56

Paul Georg Podlech · Accepted Answer · 2015-08-12 14:47:02Z

1

I am assuming this css code is wrong. Try this (notice the url parameter):

element.css({
    'background-image': 'url("' + url +'")',
    'background-size': 'cover',
    'background-repeat': 'no-repeat'
    })

answered Aug 12, 2015 at 14:47

Paul Georg Podlech

5303 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thomasmost Over a year ago

No dice. Tried and same behavior.

Freezystem · Accepted Answer · 2015-08-12 14:47:13Z

0

Maybe you should try to set directly the style object properties :

var style = element.currentStyle || window.getComputedStyle(element);

style.backgroundImage  = 'url("' + url +'")';
style.backgroundSize   = 'cover';
style.backgroundRepeat = 'no-repeat';

answered Aug 12, 2015 at 14:47

Freezystem

4,8831 gold badge37 silver badges38 bronze badges

Collectives™ on Stack Overflow

element.css in Angular Directive not updating the element's css

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related