Angularjs：如何滚动 div 并加载更多数据，例如 Google 地图？ （没有滚动条）

Question

我的问题与 this one 相同，但我正在 Angularjs 中寻找解决方案。 我的屏幕上有这样一个列表：

1
2
3
0
6
8

用户的操作类似于 google 您可以拖动的地图...但在本例中只能上下拖动。 当它达到向上或向下时，需要加载更多数据

 <div style="overflow:hidden">
     <div data-ng-repeat="item in events">
     ...

你能告诉我最好的方法是什么吗？如果有任何插件？

Answer 1

ngInfiniteScroll 是一个自定义的 Angular 指令，效果很好。

更新： 上面的link现在已经死了，好像被移到了https://sroze.github.io/ngInfiniteScroll/

Answer 2

好的，这个怎么样：

var containerHeight = 200;
var loadMargin = 10;

var i;

angular.module('Scroll', []).controller('ScrollCtrl', function($scope) {
    $("#content").draggable({
        axis: 'y',
        drag: function(evt, ui) {
            var minTop = containerHeight - $("#content").height();

            if (ui.position.top < minTop + loadMargin) {                
                //Load some more stuff here... $http anyone?
                $scope.list.push(i);
                i += 1;
                console.log('Loading!!!');

                //If you load ur stuff with $http or an Angular service
                //in principle you wont need this $digest
                $scope.$digest();
            }            
        }
    });

    $scope.list = [];
    for (i = 0; i < 20; i ++) {
        $scope.list.push(i);
    }
});

好的，我们需要设置容器的高度，以便它知道何时开始加载，而 loadMargin 基本上是您需要滚动多少才能开始加载。如果将其设置为零，则意味着它只会在您到达底部后才开始加载，因此最好将其设置为某个非零值，以便它在之前开始加载。

这里有一个 fiddle 可以看到它的实际效果： https://jsfiddle.net/thepeak/4to69oxo/