Infinite scroll code not working using angularjs?

Question

Here is a code I am working on for infinite scroll using angularJS. But the code is not working, also shows no error. Here is my code:

<!doctype html>
<html  ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>

<style>
li {
  height: 120px;
  border-bottom: 1px solid gray;
}

#fixed {
    height: 400px;
    overflow: auto;
}

</style>

<body ng-controller="myCtrl">
<div id="fixed" when-scrolled="loadMore()" >
  <ul>
    <li ng-repeat="i in items">{{i.id}}</li>
  </ul>  
</div>

<script>
var app = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){

    $scope.items = [];
    
    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.push({id: counter});
            counter += 10;
        }
    };
    
    $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];
        
        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

</script>
</body>
</html>

I think there is some problem with the ng-app or ng-controller. As I am new to angularjs please help me with this.

Thanks in advance.

Yes, Now I am getting an error. You can copy my code as it is or run the snippet to see the error. Thankx! — Malkeet Singh
– Malkeet Singh, Commented Aug 13, 2015 at 6:12

Kirill Slatin · Accepted Answer · 2015-08-13 06:54:04Z

1

Besides the fact that you have lots of syntax mistakes I don't see any troubles with code. It works when the following is corrected.

Wrong variable reference:

var app = angular.module('myApp', []);//'app' variable declared but later 
//referenced as 'myApp'
app.controller('myCtrl', function($scope){

controller function missing ); in the end

And a new module declared for some reason for a directive and not injected into myApp. Unless you have strong reasons that you clearly understand, don't spawn unnecessary modules. Get the same one you already defined

app.directive('whenScrolled', function() {

edited Aug 13, 2015 at 6:54

answered Aug 13, 2015 at 6:42

Kirill Slatin

6,1823 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Infinite scroll code not working using angularjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related