Skip to content

Instantly share code, notes, and snippets.

@robertovg
Forked from littleiffel/infinitescroll.js
Last active March 20, 2016 10:33
Show Gist options
  • Save robertovg/657ea4fd1b52d6fef467 to your computer and use it in GitHub Desktop.
Save robertovg/657ea4fd1b52d6fef467 to your computer and use it in GitHub Desktop.
app.directive('infiniteScroll', [
'$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout) {
return {
link: function(scope, elem, attrs) {
var checkWhenEnabled, handler, scrollDistance, scrollEnabled;
$window = angular.element($window);
elem.css('overflow-y', 'scroll');
elem.css('overflow-x', 'hidden');
elem.css('height', 'inherit');
scrollDistance = 0;
if (attrs.infiniteScrollDistance != null) {
scope.$watch(attrs.infiniteScrollDistance, function(value) {
return scrollDistance = parseInt(value, 10);
});
}
scrollEnabled = true;
checkWhenEnabled = false;
if (attrs.infiniteScrollDisabled != null) {
scope.$watch(attrs.infiniteScrollDisabled, function(value) {
scrollEnabled = !value;
if (scrollEnabled && checkWhenEnabled) {
checkWhenEnabled = false;
return handler();
}
});
}
$rootScope.$on('refreshStart', function(event, parameters){
elem.animate({ scrollTop: "0" });
});
handler = function() {
var container, elementBottom, remaining, shouldScroll, containerBottom;
container = $(elem.children()[0]);
elementBottom = elem.offset().top + elem.height();
containerBottom = container.offset().top + container.height();
remaining = containerBottom - elementBottom ;
shouldScroll = remaining <= elem.height() * scrollDistance;
if (shouldScroll && scrollEnabled) {
if ($rootScope.$$phase) {
return scope.$eval(attrs.infiniteScroll);
} else {
return scope.$apply(attrs.infiniteScroll);
}
} else if (shouldScroll) {
return checkWhenEnabled = true;
}
};
elem.on('scroll', handler);
scope.$on('$destroy', function() {
$window.off('scroll', handler);
elem.off();
return elem.remove();
});
return $timeout((function() {
if (attrs.infiniteScrollImmediateCheck) {
if (scope.$eval(attrs.infiniteScrollImmediateCheck)) {
return handler();
}
} else {
return handler();
}
}), 0);
}
};
}
]);
<div id="estates-listing" extend-height>
<div class="content" infinite-scroll="addMoreItems()" infinite-scroll-distance="2">
<div class="content-wrapper">
<div class="house" ng-animate="'animate'" ng-class="{inactive: (selectedEstate != null || selectedEstate != undefined) && estate.id!=selectedEstate.id , active:(selectedEstate != null || selectedEstate != undefined) && estate.id==selectedEstate.id}" ng-repeat="estate in estates | orderBy: orderProp : orderReverse | limitTo: config.itemsDisplayedInList track by estate.id" ng-mouseover="highlightMarker(estate)" ng-mouseleave="leaveMarker(estate)" ng-click="showDetailview(estate.id)" >
<div id="l-el{{estate.id}}">
</div>
</div>
</div>
</div>
</div>
@horacioh
Copy link

horacioh commented Aug 7, 2014

the 'addMoreItems()' method what exactly does? add more items via XHTTP request or changes the limitTo value??

@vacar
Copy link

vacar commented Oct 3, 2014

You have to increase your config.itemsDisplayedInList

example:

scope.addMoreItems = function() {
config.itemsDisplayedInList += 20;
}

@amarjeet
Copy link

How can this be re-purposed for a table? I have tried but always get

    TypeError: Cannot read property 'top' of undefined

It seems like directive specifically expects a certain kind of an element structure.
I am trying to use it this way:

<table>
    <tr>
        <td data-ng-repeat="property in ::listProperties">{{::property}}</td>
    </tr>
    <tbody infinite-scroll="addMoreItems()" infinite-scroll-distance="2">
        <tr data-ng-repeat="project in vm.filteredList track by project.projectId | limitTo: vm.scrollConfig.itemsDisplayedInList">
            <td data-ui-sref="home.projectInfoPanel({projectId: project.projectId})">{{::project.prosjekadresse}}
            </td>
            <td>{{::project.fylke}}</td>
            <td>{{::project.kommune}}</td>
        </tr>
</tbody>

The error crops up at the handler function, which tries to resolve an element like the following:

containerBottom = container.offset().top + container.height();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment