Javascript 将元素添加到列表的末尾滚动angularjs

我有一个要求，那就是在一行上显示一个元素列表，允许用户滚动，当他滚动到最后时，调用一个函数在这个列表中添加元素

我设法在一行中显示元素，在滚动结束时调用函数，在列表中添加元素，但问题是，我的视图不显示新元素，滚动结束不再工作

我使用的是angularJS，我需要的基本上是一个无限的水平滚动

这是我的密码： -html:

<div class="timeline">
  <div ng-repeat="t in test" class="content">
    qqq
  </div>
</div>

js:

app.controller（'timelineController'，['$scope'，函数（$scope）{
$scope.test=[]；
对于（变量i=0；i<10；i++）{
$scope.test.push（一）；
}
$（函数（）{
$（'.timeline'）。滚动（函数（）{
if（$（'.timeline'）.scrollLeft（）==（$scope.test.length*200-500））{
对于（变量i=0；i<10；i++）{
$scope.test.push（一）；
}
}
});
});
}]);

为此我使用jquery，但我更愿意使用angularJS。不幸的是，我还没有找到任何可以解决我的问题的方法

这是一把小提琴：

---

所有的想法都非常受欢迎

更新发生在角度摘要周期之外，因此它不知道对$scope的更新。您需要将更新包装在

$scope.$apply（）

中，以便让Angular知道这些更改

var app = angular.module('app', []);

app.controller('timelineController', ['$scope', function($scope) {

    $scope.test = [];
    for (var i = 0; i < 10; i++) {
        $scope.test.push(i);
    }

    $(function() {
        $('.timeline').scroll(function() {
            if ($('.timeline').scrollLeft() == ($scope.test.length * 200 - 500)) {
                $scope.$apply(function() {  // <--- $scope.$apply() added here
                    for (var i = 0; i < 10; i++) {
                        $scope.test.push(i);
                    }
                });
            }
        });
    });
}]);

app.controller('timelineController', ['$scope', function($scope) {

    $scope.test = [];
    for (var i = 0; i < 10; i++) {
        $scope.test.push(i);
    }

    $(function () {
        $('.timeline').scroll(function () {
            if ($('.timeline').scrollLeft() == ($scope.test.length * 200 - 500)) {
                for (var i = 0; i < 10; i++) {
                    $scope.test.push(i);
                }
            }
        });
    });
}]);

var app = angular.module('app', []);

app.controller('timelineController', ['$scope', function($scope) {

    $scope.test = [];
    for (var i = 0; i < 10; i++) {
        $scope.test.push(i);
    }

    $(function() {
        $('.timeline').scroll(function() {
            if ($('.timeline').scrollLeft() == ($scope.test.length * 200 - 500)) {
                $scope.$apply(function() {  // <--- $scope.$apply() added here
                    for (var i = 0; i < 10; i++) {
                        $scope.test.push(i);
                    }
                });
            }
        });
    });
}]);

<div class="timeline">
    <div ng-repeat="t in test track by $index" class="content">
        qqq
    </div>
</div>