AngularJS:使用ng-repeat进行无限滚动

时间:2017-06-13 14:45:48

标签: angularjs

我是棱角分明的新人。跳跃许多网站阅读角度代码示例的好文章。所以今天我访问了一个网站http://www.dotnetawesome.com/2016/03/infinite-scroll-for-facebook-like-pagination-angularjs.html

附带一个例子,例如如何使用angularJS创建无限滚动。

在这里,我将发布一些我不清楚的问题。因此,请回答并指导文章中的语法和代码,因为我需要了解。

1)有一个名为NextPage()的函数,函数名称已经用这样的方式分配了指令名<div infinityscroll="NextPage()" style="height:400px; overflow:auto;">

$scope.NextPage = function () {
    if ($scope.CurrentPage < $scope.TotalPage) {
        $scope.CurrentPage += 1;
        GetEmployeeData($scope.CurrentPage);
    }
}

告诉我用指令名

指定函数名是什么意思

<div infinityscroll="NextPage()" style="height:400px; overflow:auto;">

是否表示何时加载指令然后调用NextPage()函数或者它具有不同的含义?

2)首先参见指令代码

app.directive('infinityscroll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('scroll', function () {
                if ((element[0].scrollTop + element[0].offsetHeight) == element[0].scrollHeight) {
                    //scroll reach to end
                    scope.$apply(attrs.infinityscroll)
                }
            });
        }
    }
});

此行scope.$apply(attrs.infinityscroll)

的含义是什么?

因此我是新手,所以当我阅读有关角js v1 +的文章时,我正在摸索。所以请详细回答我的2个问题以指导我。感谢

1 个答案:

答案 0 :(得分:0)

NextPage()是无限滚动插件检测到用户已滚动到页面末尾或指令结尾时计算的表达式。

scope.$apply(attr.infinityscroll)告诉Angular在评估表达式后运行摘要循环。

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply