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, Jul 14 '15 at 07:44

score 0 · Answer 1 · edited May 23 '17 at 11:59

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 '17 at 11:59

Community

1
1

answered Jul 14 '15 at 07:59

Jon G Stødle

3,666
1
15
22

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 – Ysrninja Jul 14 '15 at 08:05

score 0 · Answer 2 · answered May 15 '16 at 04:29

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'>

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

2 Answers2