Question

基于我用Ajax请求修改的THIS示例获取数据我很难找到一种方法来阻止服务器无法发送数据。

我试图在service中添加一个布尔变量，在$watch中添加directive方法，但它无效。

有没有一种简单的方法来实现这一目标？

这不是我的代码，但如果没有简单的答案，我可以使用我所做的更改发布我的代码。

感谢您的帮助。

<div id="fixed" when-scrolled="loadMore()">
  <ul>
    <li ng-repeat="i in items">{{i.id}}</li>
  </ul>  
</div>

function Main($scope) {
    $scope.data = { comments : [] }
    $scope.loadMore =  function(){
        $http({
            url: '/comment/next',
            method: "POST"
        })
        .success(function(data){
            for(var i=0; i<data.length; i++){
                $scope.data.comments.push(data[i]);
            }        
        });
    }
}

angular.module('scroll', []).directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];

        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

Answer 1

我只能猜测一个没有看到更多代码的解决方案（特别是$http结果返回的内容），但我相信这种事情可以起作用，具体取决于评论对象的结构。

function Main($scope) {
    $scope.data = { comments : [] }
    $scope.scrollComplete = false;
    $scope.loadMore =  function(){            
        if($scope.scrollComplete || $scope.loading) { return; }
        $scope.loading = true;
        $http({
            url: '/comment/next',
            method: "POST"
        })
        .success(function(data){
            for(var i=0; i<data.length; i++){
                var totalComments = $scope.data.comments.length;
                if($scope.data.comments[totalComments - 1].someID === data[i].someID){
                    $scope.scrollComplete = true;
                }else{
                    $scope.data.comments.push(data[i]);
                }
            } 
            $scope.loading = false;       
        }).error(function(){ $scope.loading = false });
    }
}

请记住，像这样的解决方案并不是很优雅。我喜欢做的是允许将项目ID传递给API（即您的/ comment / next），并将其视为最后抓取的项目。因此，API只会在此之后回复所有内容。使用该方法，您只需将最后一个注释ID传递给API。

当服务器没有更多数据要发送时，Angularjs如何停止无限滚动

1 个答案: