Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: collection-repeat is incompatible with custom async directive #4042

Closed
RobbinHabermehl opened this issue Jul 6, 2015 · 1 comment
Closed

Comments

@RobbinHabermehl
Copy link

Type: bug

Platform: all

I've encountered a lot of difficulties combining collectionRepeat with my custom caching directive. In short, this directive downloads an image to the file system and then sets the path to this image as src attribute. The problem is that the first item gets copied by collectionRepeat before the linking phase, i.e. the caching, completes. Therefore the src attribute never gets set, leaving the first image blank.

There's no easy way to resolve this due to the isolated nature of collectionRepeat. For now I've created a workaround by watching the first item of a collection with a directive, once it changes it applies the src manually:

angular.module('app').directive('collectionRepeatFirstImageFix', function($compile, $timeout) {
  return {
    link: function(scope, iElement) {
      var renderImage = function() {
        var firstImage = iElement[0].querySelector('[collection-repeat] img');
        if (!firstImage || !window.cordova) {
          return;
        }
        // Put logic here
        firstImage.onerror = function() {
          firstImage.src = '';
          $timeout(renderImage, 100);
        };
        firstImage.src = 'file:///path/to/image.jpg';
      };
      scope.$watch(function() {
        return scope.collection && scope.collection[0] ? scope.collection[0]._id : null;
      }, function() {
        $timeout(renderImage);
      });
    },
    scope: {
      collection: '=collectionRepeatFirstImageFix'
    }
  };
});

HTML:

<ion-list collection-repeat-first-image-fix="images">
  <ion-item
    collection-repeat="image in images"
    force-refresh-images="true">
    <img cache-src="{{ image.url }}">
  </ion-item>
</ion-list>

Due to the complexity it's hard te create an exact replication of this issue on CodePen. I'd be more than willing to help though by testing any suggestions on my own source code or by disclosing the source code privately to the Ionic team.

@RobbinHabermehl RobbinHabermehl changed the title collection-repeat is incompatible with custom async directive bug: collection-repeat is incompatible with custom async directive Jul 6, 2015
@Ionitron
Copy link
Collaborator

Ionitron commented Oct 4, 2015

Greetings @RobbinHabermehl!

I've closed this issue because my sensors indicated it was old and inactive, and may have already been fixed in recent versions of Ionic. However, if you are still experiencing this issue, please feel free to reopen this issue by creating a new one, and include any examples and other necessary information, so that we can look into it further.

Thank you for allowing me to assist you.

@Ionitron Ionitron closed this as completed Oct 4, 2015
@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 7, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants