Progressive loading in ng-repeat for images, angular js

angularjs, angularjs-ng-repeat, lazy-loading, progressive

Solution

I didn't want to use `ngInfiniteScroll` the other guy posted as my mobile app does not use jQuery so there is no point in loading it just for this.

Anyhow, I found a jsfiddle with pure Javascript that solves this problem.

HTML

<div id="fixed" when-scrolled="loadMore()">
    <ul>
        <li ng-repeat="i in items"></li>
    </ul>
</div>

JavaScript

function Main($scope) {
    $scope.items = [];
    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.push({
                id: counter
            });
            counter += 10;
        }
    };
    $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];
        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

Source: http://jsfiddle.net/vojtajina/U7Bz9/

Problem

Original source