How to make it work with Ionic & AngularJS?

[June Rockwell]

I'm trying to lazy load images from a remote server. I first tried Echo.js using just raw JavaScript and HTML just like this:

<img src="imgs/ionic.png"  data-echo="http://somexxhost.org:3002/images/thiscat.jpg" />

It worked as expected (and was fun btw)!

But when I used Echo.js with AngularJS, it doesn't load the last few images. Sometimes it doens't load all the images.

<ion-item ng-repeat="cat in cats">
    <img src="img/ionic.png" data-echo="{{cat.imagePath}}" />
</ion-item>

I used Firebug and I saw that src='img/ionic.png' hasn't been replaced into src="http://somexxhost.org:3002/images/thiscat.jpg" and data-echo is still there in the DOM for the images that haven't loaded yet.

The probable reason is that AngularJS data-echo doesn't work right with AngularJS just like reguar src doesn't work with Angular's {{hash}} which is why ng-src was created. I might be wrong but it would be nice to get some explanations, suggestions and possible solutions.

[June Rockwell]

I figured it out. The reason why src isn't updated by Echo.js is because the way the Ionic directives were created has prevented the firing of scroll events. Since I'm putting ng-repeat inside ion-content, it was a good idea to attach a directive that fires the scroll event. See this directive for lazy loading images in ionic. It pretty much has the ideas of Echo.js https://github.com/paveisistemas/ionic-image-lazy-load