1

I want to reload the background image for a div with the same url inside directive. When my view load, I used this directive to show the image as a background to a div

app.directive('backImg', function () {
        var directive = {
            link: link,
            restrict: 'A'
        };
        return directive;

        function link(scope, element, attrs) {



            attrs.$observe('backImg',function(n,o){
                if(!n) return;


                element.css({
                  'background-image': 'url(' + n + ')',
                  'background-size': 'cover'
                });


            },true);

        }
    });

My html element looks like this

 <div data-ng-if="vm.user.user_id!==undefined" data-back-img="{{vm.serviceUrl}}/image/user/{{vm.user.user_id}}"
             class="user-img-div" style="width:100%; height:100%;"></div>

It works fine, but what happens I give a user to re-upload his profile image, so after it uploads, I want to refresh the background image with the same url. How can I make it happen? The above code not seems to be working.

PSL
  • 120,386
  • 19
  • 245
  • 237
Ammar Khan
  • 2,455
  • 6
  • 30
  • 57
  • How is the user re-uploading the image? Basically how do you set `vm.serviceUrl` – PSL Sep 02 '14 at 21:30
  • vm.serviceurl is the base url. After file upload, I make a tweak on vm.user.user_id by doing var random = (new Date()).toString(); scope.vm.user.user_id=scope.vm.user.user_id +'?r=' + random; which ultimately capture the $observe method. Even though now the url has query string parameter but it does not change the background image url, it remains same without QS. – Ammar Khan Sep 02 '14 at 21:31
  • Please check the same, I edited. Let me know if that's not clear – Ammar Khan Sep 02 '14 at 21:34
  • Ok got it, did you check inspecting the styles? to see if that got applied? – PSL Sep 02 '14 at 21:34
  • That's not get applied, this is the issue. Not sure, how to trigger it. – Ammar Khan Sep 02 '14 at 21:35
  • It worked, with img element but I want to work to make it work with background for the element. – Ammar Khan Sep 02 '14 at 21:36
  • Could be issue with the image url.. Just try to assign it manually as it does.. If you inspect it will show you. Btw do you have jquery included? Can you prepare a demo... – PSL Sep 02 '14 at 21:37
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/60479/discussion-between-user3398887-and-psl). – Ammar Khan Sep 02 '14 at 21:38
  • Try wrap your url in quotes `'background-image': 'url("' + n + '")',` Your random has spaces in it. Or change it to `var random = new Date().getTime(); ` – PSL Sep 02 '14 at 21:58

1 Answers1

1

Your issue most possibly is because of spaces in the random string (due to (new Date()).toString()) that you are appending to get the refreshed image from the browser. Spaces mean that you generate a bad image url, so you probably want to wrap url in quotes or use ticks.

Try changing it to:-

          element.css({
              'background-image': 'url("' + n + '")', //Wrap url in quotes
              'background-size': 'cover'
            });

Or just get the ticks and append it.

      var random = new Date().getTime();
PSL
  • 120,386
  • 19
  • 245
  • 237