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

Question

我在搜索一些AngularJS脚本时找到了这个示例，但我似乎无法理解代码中的angular模块和指令部分。尽管我已成功编辑了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();
}

- lynkyle

---

你觉得哪一部分/代码最不清晰？ - user554180

整个angular.module whenScrolled指令部分。无限滚动的工作原理... - lynkyle

Answer 1

我来翻译一下：

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

由于Angular不会处理列表项上新增的指令，因此我们需要使用apply方法来保证我们的滚动事件处理程序被添加。

- user554180

---

谢谢您的回答。您的解释对我很清晰，我已经接近成功了。但是，您能否也尝试解释一下返回函数中发现的参数（scope、elm、attr）以及它们的作用和使用方式。 - lynkyle

我已经接受了你的答案，因为你解释得很清楚，帮助我找到了正确的方向。谢谢。 - lynkyle