0

编辑：

仅出于检查目的，我还在 nextPage 函数中做了一个 console.log ，以检查它是否被触发：

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

似乎我陷入了无限循环，但我不明白为什么。

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

我正在尝试在视图中实现无限滚动，但由于某种原因，它只加载了最初的 4 个图像而不触发其余图像。

这是我的代码：

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;
    });
}

部分的：

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

有谁知道我哪里出错了？谢谢。

4

0 回答 0