Question

只需要一些帮助，我卡住了，并且不知道如何在Angular中实现这个追加。我想在用户滚动和滚动条触及底部时附加新数据。这是我的代码。

注意DataModel.getAllData使用分页参数访问api。

我坚持如何在onScroll期间添加新元素。这是我想要在滚动上实现的目标我想使用list_of_data.html。将所有新数据放入list_of_data。获取最终输出然后将其附加到data_list。

指令

app.directive('scroll', function() {
  console.log('scroll directive');
  return function(scope, elm, attr) {
    var raw = elm[0];
    elm.bind('scroll', function() {
      if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight - 20) {
        scope.$apply(attr.scroll);
      }
    });
  };
});

main.html中

 <div class="container" scroll="onScroll()">
    <div id="data_list" data-ng-init="getData()" >
    <div  ng-include src="data_uri"></div>
    </div>
    </div>

list_of_data.html

<div ng-repeat="mydata in list_of_data">
      <div>mydata.name</div>
      <div>mydata.description</div>     
</div>

控制器

  var next;
$scope.onScroll = function()
{ 
  if(next != null || next != "undefined"){
     DataModel.getAllData(user_info,next)
  .then(function (data) {
    $scope.list_of_data = data;
    next = data.next;
  }, function (error) {
    console.log("error"); 
  });
  }
} 

$scope.getData = function(){
  $scope.data_uri= 'views/list/list_of_data.html';
  DataModel.getAllData(user_info)
  .then(function (data) {
    $scope.list_of_data = data;
    next = data.next;
  }, function (error) {
    console.log("error"); 
  });
}

//编辑我试过这样的事情。但它只是覆盖了数据

Answer 1

您可以执行以下操作：

$scope.onScroll = function()
{ 
  DataModel.getNextData().then(function(results){
      $scope.list_of_data.push(results);
  });

}

假设您有一个特定的API函数来获取下一个结果。

角度加载数据OnScroll

1 个答案: