Event to use for binding Angular directive on image load

Question

I'm trying to integrate this jQuery plugin into an Ionic app. I'm comfortable with the idea of creating an Angular directive to wrap the plugin, but I'm struggling to get it working.

Here's the directive:

angular.module('myapp.directives', [])

.directive('flipbook', ['$rootScope', function ($rootScope) { 
    return { 
        restrict: 'A',
        link: function (scope, elem, attrs) { 
          elem.bind('load', function () { 
            $(elem).flipbook({
              speed: 125,
              autoplay: false,
              play: 'button#playbutton',
              stop: 'button#pausebutton',
              rewind: 'button#rewindbutton'
            });
          });
        } 
    };
}]);

And here's the relevant template:

<ion-view view-title="{{ album.title }}">
<ion-content>

<div flipbook>
    <div class="gallery-item" ng-repeat="photo in album.photos | orderBy: 'created_at'">
        <img ng-if="photo.thumbnail" ng-src="{{ photo.thumbnail }}"></img>
    </div>                     
    </div>                     
</div>

</ion-content>
</ion-view>

The photos are fetched using an AJAX request, and then pulled in using ng-repeat.

Using the Chrome debugger I've been able to establish that the link function gets called, but the function that binds to the load event never gets called. So presumably I'm not binding to the correct event.

Given that I want the images to finish loading before I initialise the jQuery plugin, what event should I be binding to?

Answer 1

Sadly there's no builtin event that fires when a ng-repeat has completed. You can however create a simple directive that does this trick:

app.directive('postRepeat', function() {
  return function(scope, element, attrs) {
    if (scope.$last){
      $('#book').flipbook();
    }
  };
});

Apply it on the img elements inside the ng-repeat and you're good to go.

See this plunker as proof.