javascript - 在结束滚动angularjs的列表中添加元素

Question

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

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

我正在使用 angularJS，我需要的基本上是无限水平滚动。

这是我的代码: - HTML:

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

样式:

.timeline {
  width: 500px;
  overflow-x: auto;
  white-space: nowrap;
}

.content {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: red;
}

js:

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);
                }
            }
        });
    });
}]);

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

这是一个 fiddle :https://jsfiddle.net/b67x9pog/

欢迎所有想法!

Answer 1

更新发生在 Angular 摘要周期之外，因此它不知道 $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);
                    }
                });
            }
        });
    });
}]);

在此示例中，您还需要将 track by 添加到 ng-repeat 以避免出现重复键的问题:

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