Sample AngularJS Infinite Scroll如何工作

Question

我在搜索一些时发现了这个示例AngularJS脚本,但是我似乎无法理解代码中的角度模块和指令部分.虽然我已经设法编辑了loadMore()函数以从我的ReSTful API中检索json资源,并且它与无限卷轴一起工作得很好,有人可以解释它是如何工作的,我真的很感激.在我的业余时间里,我刚刚开始阅读和尝试过去一周的AngularJS ......

原文来自小提琴(A BIG谢谢你原作者):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

我会去看看:

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

需要应用,因为Angular不会处理列表项上新添加的指令,并且不会添加我们的on scroll处理程序.