Angularjs: How to trigger event when scroll reaches to the bottom of the scroll bar in div?

Question

I\'m trying to trigger an event when scroll bar reaches the end. I found this this example. Here is my code. The problem is that it doesn\'t call loadmore() at all. The values o

Answer 1

You gave me a few good tips ... heres a complete working example for anyone else who stumbles across this post:

JS:

app.controller("controller", function ($scope) {
    $scope.test = function () {
        alert("hello!");
    }
}

HTML:

App Directive:

app.directive('onScrollToBottom', function ($document) {
    //This function will fire an event when the container/document is scrolled to the bottom of the page
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            var doc = angular.element($document)[0].body;

            $document.bind("scroll", function () {

                //console.log('in scroll');
                //console.log("scrollTop + offsetHeight:" + (doc.scrollTop + doc.offsetHeight));
                //console.log("scrollHeight: " + doc.scrollHeight);

                if (doc.scrollTop + doc.offsetHeight >= doc.scrollHeight) {
                    //run the event that was passed through
                    scope.$apply(attrs.onScrollToBottom);
                }
            });
        }
    };
});