Collection-repeat and background-image

ionic-v1
1

Hi,

I have a problem with collection-repeat and items with background-image.

Assigning a dynamic bg doesn’t work… I always see the same bg-images (3-4) repeated in loop… It’s fine if I switch to ng-repeat or if I use <img> (with collection-repeat).

Any thoughts?

Thanks

2

Can you post a demo? I have this working with a directive so you can bind to it.

.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        var content = element;
        content.css({
            'background-image': 'url(' + url +')',
            'background-size' : 'cover'
        });
    };
})

Then using this

 <a class="item my-item"
        back-img="{{item.background}}"
3

I’m using exactly the same directive! But my images are repeated… it’s like cache!

I’ll try to post a codepen today!

4

Oh, well you could try to add ?v=2to the end of your urls to prevent cacheing.
I’ll wait to look a the codepen

5

fixed using attrs.$observe

But I can’t use it because on Android the app crashs, memory problems. I have to use the img tag.

Thanks

6

Can you post a demo? A codepen?

7

sure: http://codepen.io/zelphir/pen/KwEqD

8

So I ended up combining our directives, but added a timeout to precess everything.

.directive('backImg', function($timeout){
  return function(scope, element, attrs){

    $timeout(function () {
      var url = attrs.backImg;
      var content = element;
      content.css({
        'background-image': 'url(http://lorempixel.com/600/200/sports/'+url+')',
        'background-size' : 'cover'
      });

    });

  };
});
9

Your directive doesn’t work very well… it’s exactly the problem I had before… If you don’t use $observe the bg are not updated with the current value and as you can see the bgs are duplicated!

10

Hmm, interesting. Yeah I guess $observe is needed when you evaluate the express right in the directive. Maybe add the timeout along with the observe so angular doesn’t have to process all of ionic plus the images and can run in the next scope digest

11

I have exactly the same problem as the OP. Was this ever fixed ??

1 Like