CODEWITHSUNDEEP
jqueryangularjswindowscrolltop
zihaow
zihaow

Reputation: 322

Window.scroll not working in augular controller

I tried to alert a message if the user has scrolled to the bottom. I am using angularJS and it did not seem to be working.

app.controller('MainController',function($scope, $rootScope, $route, $http, $timeout){

  // overflow auto 
  $(document).ready(function() {
      $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
           alert("bottom!");
        }
      });
  });
});

Any helps?

Upvotes: 1

Views: 1124

Answers (1)

Seamus
Seamus

Reputation: 4819

You're getting there. As Dvir pointed out, it will be easier to test your controller if you keep all DOM interaction in directives. So, you can do it like this:

angular.module("myApp", [])
    .directive('myDirective', function() {
        return {
            link: function(scope, element, attrs){
                $(window).scroll(function() {   
                   if($(window).scrollTop() + $(window).height() == $(document).height()) {
                       alert("bottom!");
                   }
                });
            }
        };
    });

Here's a working fiddle: https://jsfiddle.net/rdvjjav2/1/

Upvotes: 1

Related Questions