Angular: Empty Fiddle

http://angularjs.org/

by Douglas Duhaime

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <ul class="items-wrap" scrolly="showMore()">
      <li class="item" ng-repeat="item in items">{{item}}</li>
  </ul>
</div>

CSS

.items-wrap {
    position: absolute;
    width: 300px;
    height: 300px;
    overflow: scroll;
}

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
myApp.directive('scrolly', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
        		// raw is simply the div to which the directive is bound
            var raw = element[0];
            console.log(raw);
            console.log('loading directive');
                
            element.bind('scroll', function () {
                console.log('in scroll');
                console.log(raw.scrollTop + raw.offsetHeight);
                console.log(raw.scrollHeight);
                if (raw.scrollTop + raw.offsetHeight > raw.scrollHeight) {
                    scope.$apply(attrs.scrolly);
                }
            });
        }
    };
});

//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    
    $scope.items = [];
    for(var i=0;i< 50;i++){
        $scope.items.push('item: ' + i);
    }
    
    
}