<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="DemoController">
<div class="container" id="parent">
<div class="intermidiatediv">
<div infinite-scroll-container="'#parent'" infinite-scroll="loadMore()" infinite-scroll-distance="0" infinite-scroll-parent="true">
<img ng-repeat="image in images" ng-src="http://placehold.it/225x250&text={{image}}" />
</div>
</div>
</div>
</div>
</body>
</html>
/* ng-infinite-scroll - v1.1.2 - 2014-11-03 */
var mod;
mod = angular.module('infinite-scroll', []);
mod.value('THROTTLE_MILLISECONDS', null);
mod.directive('infiniteScroll', [
'$rootScope', '$window', '$timeout', 'THROTTLE_MILLISECONDS', function($rootScope, $window, $timeout, THROTTLE_MILLISECONDS) {
return {
scope: {
infiniteScroll: '&',
infiniteScrollContainer: '=',
infiniteScrollDistance: '=',
infiniteScrollDisabled: '=',
infiniteScrollUseDocumentBottom: '='
},
link: function(scope, elem, attrs) {
var changeContainer, checkWhenEnabled, container, handleInfiniteScrollContainer, handleInfiniteScrollDisabled, handleInfiniteScrollDistance, handleInfiniteScrollUseDocumentBottom, handler, height, immediateCheck, offsetTop, pageYOffset, scrollDistance, scrollEnabled, throttle, useDocumentBottom, windowElement;
windowElement = angular.element($window);
scrollDistance = null;
scrollEnabled = null;
checkWhenEnabled = null;
container = null;
immediateCheck = true;
useDocumentBottom = false;
height = function(elem) {
elem = elem[0] || elem;
if (isNaN(elem.offsetHeight)) {
return elem.document.documentElement.clientHeight;
} else {
return elem.offsetHeight;
}
};
offsetTop = function(elem) {
if (!elem[0].getBoundingClientRect || elem.css('none')) {
return;
}
return elem[0].getBoundingClientRect().top + pageYOffset(elem);
};
pageYOffset = function(elem) {
elem = elem[0] || elem;
if (isNaN(window.pageYOffset)) {
return elem.document.documentElement.scrollTop;
} else {
return elem.ownerDocument.defaultView.pageYOffset;
}
};
handler = function() {
var containerBottom, containerTopOffset, elementBottom, remaining, shouldScroll;
if (container === windowElement) {
containerBottom = height(container) + pageYOffset(container[0].document.documentElement);
elementBottom = offsetTop(elem) + height(elem);
} else {
containerBottom = height(container);
containerTopOffset = 0;
if (offsetTop(container) !== void 0) {
containerTopOffset = offsetTop(container);
}
elementBottom = offsetTop(elem) - containerTopOffset + height(elem);
}
if (useDocumentBottom) {
elementBottom = height((elem[0].ownerDocument || elem[0].document).documentElement);
}
remaining = elementBottom - containerBottom;
shouldScroll = remaining <= height(container) * scrollDistance + 1;
if (shouldScroll) {
checkWhenEnabled = true;
if (scrollEnabled) {
if (scope.$$phase || $rootScope.$$phase) {
return scope.infiniteScroll();
} else {
return scope.$apply(scope.infiniteScroll);
}
}
} else {
return checkWhenEnabled = false;
}
};
throttle = function(func, wait) {
var later, previous, timeout;
timeout = null;
previous = 0;
later = function() {
var context;
previous = new Date().getTime();
$timeout.cancel(timeout);
timeout = null;
func.call();
return context = null;
};
return function() {
var now, remaining;
now = new Date().getTime();
remaining = wait - (now - previous);
if (remaining <= 0) {
clearTimeout(timeout);
$timeout.cancel(timeout);
timeout = null;
previous = now;
return func.call();
} else {
if (!timeout) {
return timeout = $timeout(later, remaining);
}
}
};
};
if (THROTTLE_MILLISECONDS != null) {
handler = throttle(handler, THROTTLE_MILLISECONDS);
}
scope.$on('$destroy', function() {
return container.off('scroll', handler);
});
handleInfiniteScrollDistance = function(v) {
return scrollDistance = parseFloat(v) || 0;
};
scope.$watch('infiniteScrollDistance', handleInfiniteScrollDistance);
handleInfiniteScrollDistance(scope.infiniteScrollDistance);
handleInfiniteScrollDisabled = function(v) {
scrollEnabled = !v;
if (scrollEnabled && checkWhenEnabled) {
checkWhenEnabled = false;
return handler();
}
};
scope.$watch('infiniteScrollDisabled', handleInfiniteScrollDisabled);
handleInfiniteScrollDisabled(scope.infiniteScrollDisabled);
handleInfiniteScrollUseDocumentBottom = function(v) {
return useDocumentBottom = v;
};
scope.$watch('infiniteScrollUseDocumentBottom', handleInfiniteScrollUseDocumentBottom);
handleInfiniteScrollUseDocumentBottom(scope.infiniteScrollUseDocumentBottom);
changeContainer = function(newContainer) {
if (container != null) {
container.off('scroll', handler);
}
container = typeof newContainer.last === 'function' && newContainer !== windowElement ? newContainer.last() : newContainer;
if (newContainer != null) {
return container.on('scroll', handler);
}
};
changeContainer(windowElement);
handleInfiniteScrollContainer = function(newContainer) {
if ((!(newContainer != null)) || newContainer.length === 0) {
return;
}
newContainer = angular.element(document.querySelector(newContainer));
if (newContainer != null) {
return changeContainer(newContainer);
} else {
throw new Exception("invalid infinite-scroll-container attribute.");
}
};
scope.$watch('infiniteScrollContainer', handleInfiniteScrollContainer);
handleInfiniteScrollContainer(scope.infiniteScrollContainer || []);
if (attrs.infiniteScrollParent != null) {
changeContainer(angular.element(elem.parent()));
}
if (attrs.infiniteScrollImmediateCheck != null) {
immediateCheck = scope.$eval(attrs.infiniteScrollImmediateCheck);
}
return $timeout((function() {
if (immediateCheck) {
return handler();
}
}), 0);
}
};
}
]);
// Code goes here
var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function($scope) {
$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
$scope.loadMore = function() {
var last = $scope.images[$scope.images.length - 1];
for(var i = 1; i <= 8; i++) {
$scope.images.push(last + i);
}
};
});
/* Styles go here */
.container {
overflow:scroll;
min-height:250px;
max-height:250px;
}