这个示例 AngularJS 无限滚动是如何工作的

Question

我在搜索一些 AngularJS 脚本时发现了这个示例，但是我似乎无法理解代码的角度模块和指令部分。尽管我已经设法编辑 loadMore() 函数以从我的 ReSTful API 中检索 json 资源，并且它与无限滚动配合得很好，但有人可以解释一下它是如何工作的，我将不胜感激。过去一周，我在业余时间才刚刚开始阅读和尝试 AngularJS……

Fiddle 原创（非常感谢原作者）：http://jsfiddle.net/vojtajina/U7Bz9/

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

    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.push({id: counter});
            counter += 10;
        }
    };

    $scope.loadMore();
}

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

        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

由我修改：

function Main($scope, $http) {

    $scope.phones = [];

    $scope.loadMore = function() {
        $http.get('http://www.somewhere.com/api/phones').success(function(data) {
            if($scope.phones.length > 0) {
                $scope.phones = $scope.phones.concat(data);
            }
            else {
                $scope.phones = data;
            }
        });
    };

    $scope.loadMore();
}

Answer 1

我会试试这个：

该指令返回一个链接函数，该函数将为指令的每个实例调用。因此它将在加载时执行并将滚动事件处理程序附加到每个列表项。如果高度计算为真，那么它将附加一个属性“whenScrolled”，这是一个指令到当前 li 并强制 Angular 重新编译 DOM，它将处理新指令，并且该指令将调用 loadMore()，添加更多列表中的项目。

apply 是必需的，因为 Angular 不会处理列表项上新添加的指令，并且不会添加我们的 on scroll 处理程序。