AngularJS infinite-scroll issue

Question

I'm trying to use infinite-scroll to lazy load images. I'm getting the following error when it's called though:

TypeError: undefined is not a function at handler (http://onfilm.us/ng-infinite-scroll.js:31:34)

Here's a very watered down look of what I have thus far.

function tagsController($scope) {
    $scope.handleClick = function(tags) {
        // Parse Tags
        $scope.finished_tags = parsed_data;
    };

    $scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};

function imagesController($scope,$http) {

    var rows_per = 5;

    $scope.$on('handleBroadcast', function(event, args) {
        // Sort the images here, put them in matrix
        // Example: matrix[row_number] = { picture1, picture2, picture3 }

        $scope.data = matrix;
        $scope.loadMore();
     };

     $scope.loadMore() = function() {
         var last = $scope.images.length;

         for ( var i = 0; i < rows_per; i++ ) {
             $scope.images[last + i] = new Array();
             $scope.images[last + i] = $scope.data[last + i].slice( 0 );
         }
    }
}

The rough idea is that the page loads the first time (w/ no tags) and get images from a PHP script. All of them. They are stored, and loadMore() is called which will populate $scope.images with 5 rows of images. It does, and they are loaded.

The line in that script is accessing $window.height and $window.scrollup. I'm still pretty green w/ Javascript, so feel free to lambast me if I'm doing something horribly wrong.

This is the broken version I'm testing with: http://onfilm.us/test.html

Here is a version before the lazy loading was implemented, if seeing how the tags work will help. I don't think that's the issue here though.

http://onfilm.us/image_index.html

EDIT: I do think this is a problem w/ the ng-infinite-scroll.js script. The error is on line 31 (of version 1.0.0). It's telling me: TypeError: undefined is not a function It doesn't like $window apparently.

My JS Kung Fu is not really equipped to say why. YOu can see a literal copy/paste job from the simple demo here (with the error) onfilm.us/scroll2.html

Amitesh · Accepted Answer · 2014-10-17 06:37:14Z

1

By refering your site, It appears at first instance that your HTML-markup is not appropriate. You should move infinite-scroll to the parent of ng-repeat directive so that it will not make overlapping calls for each row generated. Please visit http://binarymuse.github.io/ngInfiniteScroll/demo_basic.html

answered Oct 17, 2014 at 6:37

Amitesh

1,5171 gold badge12 silver badges20 bronze badges

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

5 Comments

kiss-o-matic Over a year ago

Thanks for the input. I've updated onfilm.us/test.html but am getting the same issue -- an error within infinite-scroll.js. I will try to implement the simple demo and "build out" from there.

kiss-o-matic Over a year ago

I've basically copy/pasted the simple demo, and I get the same error. Please have a look at onfilm.us/scroll.html. I downloaded 1.0.0 from the main site.

Amitesh Over a year ago

Hey, You are missing JQuery lib reference. Note that Angular provides only basic JQuery functionality which is not adequate for infinite-scroll. Add this before angular reference. Also there is a typo error in your loadMore fn -- $scope.imges instead of $scope.images

kiss-o-matic Over a year ago

Yes -- I figured this out last night, and was just coming here to fix it. ;) Thanks. I hit another snag but it's something else entirely.

Andres Over a year ago

Also, it's important to include jquery before angular as you might get "undefined is not a function" errors.

Collectives™ on Stack Overflow

AngularJS infinite-scroll issue

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related