AngularJS ng-infinite-scroll not working on a specific container/div

Question

I wrote this code after reading multiple posts about ng-infinite-scroll

<div class="course-enrollment-friends" ng-class="{'friends-paginated':showMoreFriends}">
    <div class="row" id="enrollment-friends" ng-show="!noFriends">
        <div
         infinite-scroll="enrollCtrl.retYearAndSem()"
         infinite-scroll-disabled='!{{showMoreFriends}}'
         infinite-scroll-parent='true'>
            <div class="col-md-2" ng-repeat="friend in friends" style="margin-bottom:10px;">

However this didn't work. So I tried something slightly different

<div class="course-enrollment-friends" ng-class="{'friends-paginated':showMoreFriends}">
    <div class="row" id="enrollment-friends" ng-show="!noFriends">
        <div
         infinite-scroll="enrollCtrl.retYearAndSem()"
         infinite-scroll-disabled='!{{showMoreFriends}}'
         infinite-scroll-container='.course-enrollment-friends'>
            <div class="col-md-2" ng-repeat="friend in friends" style="margin-bottom:10px;">

What am I doing wrong?

I can't find any reference to infinite-scroll-container='.course-enrollment-friends' in the docs. Where's that from? — Jon G Stødle
– Jon G Stødle, Commented Jul 14, 2015 at 7:44

Community · Accepted Answer · 2017-05-23 11:59:55Z

0

From the answer in this thread, it seems you forgot the double quotes:

The value of infinite-scroll-container in this example is double-quoted class name .content then wrapped by single quotes. If you read the source, the string value eventually gets fed into document.querySelector. You can read the documentation on that to see what value it expects.

Without the double quotes .course-enrollment-friends is passed in as a variable name, not as a string as is required.

So

infinite-scroll-container='".course-enrollment-friends"'

instead of

infinite-scroll-container='.course-enrollment-friends'

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Jul 14, 2015 at 7:59

Jon G Stødle

3,9041 gold badge18 silver badges24 bronze badges

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

1 Comment

Ysrninja Over a year ago

Hey, thanks for the reply. While I was hopeful that you caught the issue, it still didn't work... I'm guessing I'm doing something wrong with the divs somewhere

TN Sankaranandh · Accepted Answer · 2016-05-15 04:29:47Z

0

Try removing the braces around the value given in infinite-scroll-disabled. Use:

<div
     infinite-scroll="enrollCtrl.retYearAndSem()"
     infinite-scroll-disabled='!showMoreFriends'
     infinite-scroll-container='.course-enrollment-friends'>

instead of :

<div
     infinite-scroll="enrollCtrl.retYearAndSem()"
     infinite-scroll-disabled='!{{showMoreFriends}}'
     infinite-scroll-container='.course-enrollment-friends'>

answered May 15, 2016 at 4:29

TN Sankaranandh

1

Collectives™ on Stack Overflow

AngularJS ng-infinite-scroll not working on a specific container/div

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related