0

Edit:

Just for checking purposes, I also did a console.log inside the nextPage function, to check if it's being triggered:

$scope.nextPage = function() {
    var captureLength = $scope.captures.length;
    console.log('TRIGGER');
    if($scope.busy) {
        return;
    }
    ...
    }
};

And it seems I'm getting a infinite loop, but I can't see why.

=================================

I'm trying to implement infinitescroll into a view but for some reason it's only loading the initial 4 images and not triggering the rest.

Here is my code:

CTRL:

/* ----------------------- Variables ----------------------- */    
$scope.auth = auth;
$scope.captures = [];
$scope.following = [];

$scope.allData = [];
$scope.busy = true;
var page = 0;
var step = 4;

$scope.nextPage = function() {
    var captureLength = $scope.captures.length;
    if($scope.busy) {
        return;
    }
    $scope.busy = true;
    $scope.captures = $scope.captures.concat($scope.allData.splice(page * step, step));
    page++;
    $scope.busy = false;
    if($scope.captures.length === 0) {
        $scope.noMoreData = true;
    }
};


/* ----------------------- Process Data ----------------------- */
$q.all({follows: findFollow(), users: getUsers(), captures: getAllCaptures()}).then(function(collections) {
var follows = collections.follows;
var users = collections.users;
var captures = collections.captures;
    follows.filter(function(follow) {
        return follow.follower_id === auth.profile.user_id;
        }).forEach(function(follow) {

        users.filter(function(user) {
            return user.user_id === follow.followed_id;
            }).forEach(function(user) {
                $scope.following.push(user);
        });
    });

    follows.filter(function(follow) {
        return follow.follower_id === auth.profile.user_id;
        }).forEach(function(follow) {

        captures.filter(function(capture){
            return follow.followed_id === capture.userId;
        }).forEach(function(capture){
                console.log(capture);
                $scope.allData.push(capture);
        });
    });
    $scope.nextPage();
    $scope.busy = false;
});

/* ----------------------- Retrieve Services - Data ----------------------- */
function findFollow() {
    return userApi.findFollow().then(function(res) {
        return res.data;
    });
}

function getUsers() {
    return userApi.getUsers().then(function(res) {
        return res.data.users;
    });
}

function getAllCaptures() {
    return captureApi.getAllCaptures().then(function(res) {
        return res.data;
    });
}

Partial:

<div class="col-md-8">
<div class="well main-well">
    <h3 class="page-header-h3">Following Dashboard:</h3>
    <hr />
    <h4 align="center" ng-show="!captures.length">
                        <strong>The people that you are following, have not posted anything yet.. Yikes!</strong>
                        <br /><br />
                        Quickly, go follow more people!</h4>
    <div class="row" infinite-scroll="nextPage()" infinite-scroll-disabled="busy || noMoreData" infinite-scroll-distance="0.1">
        <ul class="dynamic-grid" angular-grid="captures" ag-id="gallery">
            <li data-ng-repeat="capture in captures | orderBy :'created_at':true" class="grid">
                 <a ui-sref="detail({id: capture._id})">
                     <img ng-src="{{capture.picture}}" class="grid-img" />
                     <span class="follow-capture-info">
                        <span class="follow-capture-name"><span class="glyphicon glyphicon-user"></span> 
                          {{capture.author}} 
                            <span class="following-capture-time">· 
                                <span class="glyphicon glyphicon-time"></span> 
                                <span am-time-ago="capture.created_at"></span>
                            </span>
                        </span>
                    </span>
                 </a>
            </li>
        </ul>
    </div>
    <div ng-show="busy">Loading more...</div>
</div>

Anyone know where I went wrong? Thanks.

Borni
  • 119
  • 2
  • 12
  • Put `console.log('TRIGGER');` after the `if($scope.busy) { return; }` part - This will show if you're actually getting an infinite loop – Alon Eitan Jun 14 '16 at 16:11
  • @AlonEitan Yes it keeps going if I scroll down. Also I console logged the page variable and that seems to be beyond the amount of pages it should. – Borni Jun 14 '16 at 16:15

0 Answers0