Question

我正在努力实现无限滚动。在我知道我可以在limitTo上使用ng-repeat选项来加载有限数量的记录的路上。我点击了这样的按钮就使用了这个：

profile.ejs：

<li class="media media-clearfix-xs"  ng-repeat="post in allPosts | limitTo:totalDisplayed" id="october" >

      <!-- Post start here -->
       <!-- Post End here -->

    <button class="btn btn-primary btn-xs pull-right" ng-click="loadMore()">Load more</button>

profileController.js：

$scope.totalDisplayed = 5;

$scope.loadMore = function () {
  $scope.totalDisplayed += 5;  
};

工作正常。当用户滚动到页面底部时，我该怎么做。搜索了几个小时后，我找到了一些链接，但没有运气。有人可以帮我怎么做？

Answer 1

我建议你创建一个在该元素上有滚动事件的指令，当底部到达该元素时，我们将从指令调用scope函数。

<强>标记

<ul reached-to-bottom="loadMore()">
    <li ng-repeat="post in allPosts | limitTo:totalDisplayed"></li>
</ul>

<强>指令

app.directive('reachedToBottom', function($window, $document){
    return{
        link: function(scope, element, attrs){
            element.on('scroll', function(){
                if(element[0].scrollTop + element.innerHeight() == element[0].scrollHeight){
                    scope.$eval(attrs.reachedToBottom);
                }
            })
        }
    }
});

ng-repeat limitTo在页面上滚动到底部

1 个答案: