I have found this sample AngularJS script when I was searching for some, but then I can't seem to get my head around the angular module and directive part of the code. Though I have managed to edit the loadMore() function to retrieve a json resource from my ReSTful API and it works great with the infinite scroll, can someone please give an explanation on how this works, I would really appreciate it. I have just barely started reading and trying AngularJS for the past week during my spare time...

Original from fiddle (A BIG Thank You to the original Author): /

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);
            }
        });
    };
});

Modified by me:

function Main($scope, $http) {

    $scope.phones = [];

    $scope.loadMore = function() {
        $http.get('').success(function(data) {
            if($scope.phones.length > 0) {
                $scope.phones = $scope.phones.concat(data);
            }
            else {
                $scope.phones = data;
            }
        });
    };

    $scope.loadMore();
}

I have found this sample AngularJS script when I was searching for some, but then I can't seem to get my head around the angular module and directive part of the code. Though I have managed to edit the loadMore() function to retrieve a json resource from my ReSTful API and it works great with the infinite scroll, can someone please give an explanation on how this works, I would really appreciate it. I have just barely started reading and trying AngularJS for the past week during my spare time...

Original from fiddle (A BIG Thank You to the original Author): http://jsfiddle/vojtajina/U7Bz9/

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);
            }
        });
    };
});

Modified by me:

function Main($scope, $http) {

    $scope.phones = [];

    $scope.loadMore = function() {
        $http.get('http://www.somewhere./api/phones').success(function(data) {
            if($scope.phones.length > 0) {
                $scope.phones = $scope.phones.concat(data);
            }
            else {
                $scope.phones = data;
            }
        });
    };

    $scope.loadMore();
}

• javascript
• angularjs

Share Improve this question Follow edited May 23, 2013 at 6:42 lynkyle asked May 23, 2013 at 6:21 lynkylelynkyle 22144 silver badges1111 bronze badges 2

• which part/code is most unclear to you? – user554180 Commented May 23, 2013 at 6:43
• The whole angular.module whenScrolled directive bit. How the infinite scroll works... – lynkyle Commented May 23, 2013 at 6:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I'll have a go at this:

This directive returns a link function, which will be called for each instance of the directive. So it will get executed on load and attach an on scroll event handler to each list item. If the height calculation is true then it will attach an attribute "whenScrolled", which is a directive to the current li and force Angular to repile the DOM, which will process the new directive, and this directive will call loadMore(), adding more items to the list.

The apply is needed because Angular will not process the newly added directive on the list item and our on scroll handler will not be added.