Angular JS: Can we assign custom CSS to an HTML element more than once in a directive?

Question

I created a custom directive whose purpose is to dynamically assign a base64 string and file extension as a background image to a <div> which will be used as a user profile photo. Here is the relevant code:

app.directive('backImg', function() {
    return {
        link: function(scope, element, attrs) {
            scope.$watchGroup(['profilePictureStr', 'profilePictureExt'],
            function(newValues, oldValues, scope) {
                element.css({
                    'background-image': 'url(data:image/' +
                                        scope.profilePictureExt + ';base64,' +
                                        scope.profilePictureStr + ')',
                    'background-size':'contain',
                    'background-repeat':'no-repeat',
                    'background-position':'center'
                });
            });
        }
    };
});

here is the <div> whose CSS I would like to dynamically control from the directive:

<div back-img>

What I currently observe is that the first time the watch gets called, upon load, the element.css() call succeeds. However, at page load the scope variables profilePictureStr and profilePictureExt have not yet been assigned, and are empty string. Shortly thereafter, the page makes a REST call to retrieve the base-64 image string corresponding to the logged in user. However, the second time the watch is called, the element.css() call does not appear to stick. The code does in fact get called, but the CSS seems to be unchanged.

Is it not possible to dynamically change CSS in the DOM from an Angular directive more than once? At this point I am leaning towards just putting everything into the style attribute of the <div> in question, but I would much rather use a directive to do this if possible.

Have you tried adding a conditional in the $watch callback to check that the two scope variables aren't ''? Then the next time element.css is called it will be with the correct values. — Ankh
– Ankh, Commented Dec 15, 2016 at 9:06
@Ankh The scope variables have the correct value during the second call, I verified that. — Tim Biegeleisen
– Tim Biegeleisen, Commented Dec 15, 2016 at 9:09

Ahmed Mostafa · Accepted Answer · 2016-12-15 09:10:43Z

1

try this

app.directive('backImg', function() {
        return {
            link: function(scope, element, attrs) {
                scope.$watchGroup(['profilePictureStr', 'profilePictureExt'],
                    function(newValues, oldValues, scope) {

                        if (scope.profilePictureExt && scope.profilePictureStr) {

                            element.css({
                                background: 'url("data:image/' + scope.profilePictureExt + ';base64,' + scope.profilePictureStr + '") contain no-repeat center'
                            });


                        }

                    });
            }
        };
    });

answered Dec 15, 2016 at 9:10

Ahmed Mostafa

6961 gold badge4 silver badges17 bronze badges

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

3 Comments

Tim Biegeleisen Over a year ago

Thanks for the quick reply. The result I get is very strange. This is what I see in the style attribute of the <div>: style="background-size: contain; background-repeat: no-repeat; background-position: center center;" ... in other words, the background-image attribute does not even appear. Do you have any idea what could be going on here?

Tim Biegeleisen Over a year ago

I think my data has a problem, maybe the browser can't make the background string assignment. Checking for this now.

Ahmed Mostafa Over a year ago

can you log here the data object to to see it with ext.

Tim Biegeleisen · Accepted Answer · 2016-12-15 09:34:22Z

It turns out the problem was being caused by passing an incorrectly built url string as the background-image property in my directive. Here is what I was passing:

url(data:image/png;base64,R0lGO...)

If you look closely, you will see that there are no single quotes around the content inside parentheses, which are required. After fixing this problem, the url looked like this:

url('data:image/png;base64,R0lGO...')

While this is just a typo, this question is useful because of the way Angular handled this error. This was a silent error, with no output to the console of any kind. In addition, it appears that the other valid CSS properties were being set, with just the background-image being ignored.

Thanks to @AhmedMostafa for tipping me off in the right direction.

Collectives™ on Stack Overflow

Angular JS: Can we assign custom CSS to an HTML element more than once in a directive?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related