Angular Infinity.js integration

Demonstrating how to integrate infinity.js with AngularJS

by neoswf

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://airbnb.github.io/infinity/infinity.js"></script>
<body ng-controller="demoCtrl">
    <div class="container">
        <div id="list" infinity-scroll ng-transclude>
            <div ng-repeat="item in items" infinity-item="list">
                <span>{{item.title}}</span>
            </div>
        </div>
    </div>
</body>

CSS

#list {
    height: 300px;
    overflow: auto;
}

JavaScript

var demoApp = angular.module("demo", []);

demoApp.controller("demoCtrl", function($scope) {
    $scope.items = [];
    for(var i = 0; i < 300; i++) {
        $scope.items.push({ title: "Item " + i });
    }
});


demoApp.directive("infinityScroll", function() {
    'use strict';
    
    return {
        restrict: "A",
        transclude: true,
        
        
        link: function(scope, elm, $attrs) {
            var listView = new infinity.ListView($(elm), {
                lazy: function() {
                    $(this).find("[infinity-item]").each(function() {
                      var $ref = $(this);
                      $ref.attr('src', $ref.attr('data-original'));
                    });
                },
                useElementScroll: true
            });
            
            elm.data("listView", listView);
        }
    };
});


demoApp.directive("infinityItem", function() {
    'use strict';
    
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            var listView = $("#" + attrs.infinityItem).data("listView");
            if (listView) {
                listView.append(element);
            }
        }
    }
});