Use of collection-repeat with custom directive that displays images

ionic-v1
1

Short description of the problem:

I am using the directive collection-repeat with an array of contacts. Within it, I use a custom directive to display an image, a title and a subtitle. The directive makes use of the CSS property background-image to show the image.

The issue is that when I refresh the model array and the URL of the images chage, the behavior of the images becomes buggy: as you scroll, for some items the image displayed is incorrect. Demo here.

What behavior are you expecting?

The images to be completely refreshed when the model array is changed.

Steps to reproduce:
In the demo, when you click on “Facebook contacts” the image shown is the Facebook logo. However, when you click on “Google” contacts, and scroll, the images are sometimes incorrect.

  <ion-content>
    <ion-list>
      <div class="item item-avatar" 
      collection-repeat="contact in viewing"
      force-refresh-images="true"
      ng-click="selectContact(contact)">
        <custom-avatar from="contact"></custom-avatar>
        <h2>{{contact.title}}</h2>
        <p>{{contact.subtitle}}</p>
      </div>
    </ion-list>
  </ion-content>

.directive('customAvatar', function($$jqLite) {
    return {
      restrict: "AE",
      transclude: true,
      scope: {
        from: '='
      },
      template: '<div class="from" ng-class="{hasNotPic:!fromUrl}"></div>',
      link: function(scope, element, attrs) {
        var process = function() {
          element.on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
          })

          if (scope.from) {
            scope.fromUrl = scope.from.feed_pic_url;

            var fromEl = element[0].querySelector('.from');

            if (scope.fromUrl) {
              $$jqLite(fromEl).css('background-image', 'url("' + scope.fromUrl + '")');
            } 
          }
        }

        var destroy = scope.$watch('from', function() {
          if (scope.from) {
            process();
            destroy();
          }
        });

      },
      
    };
  }

Other information: the issue disappears if instead of using a custom directive I use <img ng-src={{contact.feed_pic_url}} />

Which Ionic Version? 1.3.1

Plunker that shows an example of your issue

2

i have same problem and fixed it in today. My solution is: set image src=white image. or

set backgroundimage=white, when image is loading.

$element.attr(‘src’, ‘’);
$element.css({‘background-image’: ‘’ });
i use lazyview to load image.
mycode pen: http://codepen.io/anon/pen/yJJLKg