Skip to content

Instantly share code, notes, and snippets.

@littleiffel
Last active April 14, 2019 09:17
Show Gist options
  • Star 18 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save littleiffel/7486759 to your computer and use it in GitHub Desktop.
Save littleiffel/7486759 to your computer and use it in GitHub Desktop.
My directive for infinite scroll
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() {
return $window.off('scroll', handler);
});
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>
@littleiffel
Copy link
Author

The extend-heihgt directive sets a height on the element to stretch to display height 100%. Can share that as well if needed

@slav
Copy link

slav commented Feb 18, 2014

Could you please share extend-height?

@ukmaloth
Copy link

Could you please share extend-height?

@aneurysmjs
Copy link

please, share extend-height

@gigocabrera
Copy link

+1

@sagargajera
Copy link

I have performance issue with ng-repeat.But I have used OnsenUI so instead of

, I have and
Can any one help me to deal with it?
thanks

@sagargajera
Copy link

Got error with below code.Please help
ons-list id="dashboardlist" infinite-scroll="addMoreItems()" infinite-scroll-distance="2"

ons-list-item modifier="tappable" ng-repeat="case in filtered = (cases | filter: search | orderBy:predicate:reverse | orderEmpty:predicate:'toBottom'|limitTo: data)"

$scope.data = 5;

    $scope.addMoreItems = function () {
        $scope.data += 5;
    };

@sagargajera
Copy link

error
TypeError: Object [object Object] has no method 'offset'
at link.handler (file:///android_asset/www/app/shared/directive.js:47:40)
at file:///android_asset/www/app/shared/directive.js:71:30
at file:///android_asset/www/assets/lib/angular_1.4.0-rc.2.js:17554:31
at completeOutstandingRequest (file:///android_asset/www/assets/lib/angular_1.4.0-rc.2.js:5353:10)

at file:///android_asset/www/assets/lib/angular_1.4.0-rc.2.js:5625:7

After debugging this,found problem with below line.
elementBottom = elem.offset().top + elem.height();

please help me to solve this

@nealshan
Copy link

@sagargajera,

  1. DOMElement which doesn't have the offset() method. You need to use a jQuery object:,
    like code above it,
    container = $(elem.children()[0]);

  2. the addMoreItems(), which is handler(), is used with LimitTo, like this
    $scope.config = {};
    $scope.config.itemsDisplayedInList = 5;
    $scope.addMoreItems = function(){
    $scope.config.itemsDisplayedInList += 5;
    }
    so while scrolling, the list will be increasing automatically.

@littlebox692
Copy link

$rootScope.$on('refreshStart',xxxxxxxx) doesn't work,bro.I don't know what's this function means.........

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