从AngularJS的顶部（反向）无限滚动

Question

我正在尝试进行反向无限滚动。我有，我收到了近10篇最近的评论，并希望用户能够滚动评论列表 最多 检索下一个10
-类似FB它显示了最近的评论的“获取前”链接，而是通过滚动事件，而不是链接。

我从http://jsfiddle.net/vojtajina/U7Bz9/开始，尝试将其修改为反向无限滚动，并很快以如下形式结束了：

  function Main($scope, $timeout) {
    $scope.items = [];

    var counter = 0;
    $scope.loadMore = function() {
      // simulate an ajax request
      $timeout( function() {
        for (var i = 0; i < 5; i++) {
          $scope.items.unshift({id: counter});
          counter += 10;
        }}, 1000);
    };

    $scope.loadMore();
  }

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

      $timeout(function() {
        raw.scrollTop = raw.scrollHeight;
      }, 1100);

      elm.bind('scroll', function() {
        // note: if test for < 100 get into infinite loop due to 
        // the delayed render
        if (raw.scrollTop === 0) {
          var sh = raw.scrollHeight
          scope.$apply(attr.whenScrolled);
          // the items are not loaded and rendered yet, so
          // this math doesn't work
          raw.scrollTop = raw.scrollHeight - sh;
        }
      });
    };
  }]);
  ​

http://jsfiddle.net/digger69/FwWqb/2/

问题在于，当检索到下10个项目时，它们将被添加到列表的顶部，并且整个列表将重新呈现，并且位于列表中的项目将完全滚动到视图之外。在小提琴中，项目“
40”在顶部，当您滚动（略微向下）然后向上触发以滚动时，项目“ 90”在顶部。我正在寻找一种好的策略，在渲染后将“ 40”保持在滚动区域的顶部。

注意：在小提琴中，我可以通过在滚动事件中保存顶部li并调用scrollIntoView（）使其工作， 直到 添加超时以模拟ajax调用 为止
。随着超时，在请求返回并呈现新元素之前，顶部li被滚动到视图中：/

var top = elm.find("li")[0];
scope.$apply(attr.whenScrolled);
top.scrollIntoView();

Answer 1

您可以尝试执行以下操作：http :
//jsfiddle.net/mNFmf/4/

这将滚动到div的底部：

$timeout(function() {
    raw.scrollTop = raw.scrollHeight;          
});

这将使div不会向上滚动到列表中的第一项：

var sh = raw.scrollHeight
scope.$apply(attr.whenScrolled);
raw.scrollTop = raw.scrollHeight - sh;

更新资料

为了克服ajax请求问题，请尝试使用promises。

http://jsfiddle.net/mNFmf/8/

加载程序看起来像这样：

$scope.loadMore = function() {
  var deferred = $q.defer();

  // do ajax request here and after getting the result call:   
  deferred.resolve();

  return deferred.promise;
};

在另一边：

loadMore.then(function() { 
  /* do whatever you want after the ajax request has been fulfilled */ 
});