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处理程序。

Sample AngularJS Infinite Scroll如何工作

1 个答案: