Angular Infinity.js integration

Demonstrating how to integrate infinity.js with AngularJS

HTML

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

CSS

.itm{   
     display: block;
}

JavaScript

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

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


demoApp.directive("infinityScroll", function() {
    'use strict';
    return {
        restrict: "A",
        transclude: true,
        link: function(scope, elm, $attrs) {
            scope.listView = new infinity.ListView($(elm));
        }
    };
});


demoApp.directive("infinityItem", function() {
    'use strict';
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            scope.listView.append(element);
        }
    }
});