CODEWITHSUNDEEP
javascriptangularjsangularjs-directivebind
unsafe_where_true
unsafe_where_true

Reputation: 6320

angular: binding to scroll event not working

I am trying to follow this jsfiddle:

http://jsfiddle.net/vojtajina/U7Bz9/

Now I have this in my script file:

var app = angular.module('my-app', [
       'scroll',
       'ui.bootstrap',
       'ngRoute']);

var scrollService = angular.module('scroll', []).directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];
        console.log("binding");

        elm.bind('scroll', function() {
          console.log("scrolling");
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

The HTML file (in jade notation) has: EDIT: I added an id and the CSS

div#lista_iniciativas.row(when-scrolled="loadMore()")

Then the 

#lista_iniciativas {
  overflow: auto;
}

`

Thing is I can see the "binding" log in the console, but never the "scrolling", even debugging I never get to enter the bind function...In other words the binding function never fires. Any idea what's wrong here? Am I binding somewhat the wrong way?

Upvotes: 1

Views: 6930

Answers (1)

unsafe_where_true
unsafe_where_true

Reputation: 6320

Here's what I found worked for me.

It's probably not the best solution, and @rahpuser reported that the code in the original post actually DOES work...so....

var scrollService = app.directive('whenScrolled', function($document, $window) {
    return function(scope, elm, attr) {
        var raw = elm[0];

        $document.bind( 'scroll', function() {
          if( ($window.innerHeight + $window.scrollY) > getDocHeight() - 100) {
                scope.$apply(attr.whenScrolled);
          } 
        });
    };
});

Upvotes: 0

Related Questions