What is the best way to ask "Is there more to scroll or have we reached the bottom of the scrollable area in Angular?"
Have a single page app with a fixed bottom navbar and want to display a ui cue indicating that there is more content to be displayed, conditional on not being at end of page. Thinking there is a bookmark way (hash tag) to do this.
Here is kind of solution: I've created directive that bind scrolling event and in case of it is possible to scroll down it show div, appended in compile time:
app.directive('thereIsMore', function() {
return {
restrict: 'A',
scope: true,
compile: function(tElement) {
tElement.append('<div class="there-is-more" ng-show="bottom">There is more...</div>');
return function(scope, element) {
var elm = element[0];
var check = function() {
scope.bottom = !(elm.offsetHeight + elm.scrollTop >= elm.scrollHeight);
};
element.bind('scroll', function() {
scope.$apply(check);
});
check();
}; // end of link
}
};
});
Working example: http://plnkr.co/edit/8W3E7BunpDxIkEPDqxzb?p=preview