Monojit Sarkar Monojit Sarkar -4 years ago 50
AngularJS Question

AngularJS: infinite scroll with ng-repeat

I am new in angular. so hopping many site to read nice article on angular code example. So today i visited a site http://www.dotnetawesome.com/2016/03/infinite-scroll-for-facebook-like-pagination-angularjs.html

which come with a example like how to create infinite scroll with angularJS.

Here i will post some question which is not clear to me. So please answer and guide about those syntax and code in the article because i need to understand.

1) There is one function called

NextPage()
which the function name has been assign with directive name like this way
<div infinityscroll="NextPage()" style="height:400px; overflow:auto;">
?

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


Tell me what does it mean to assign function name with directive name

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

Does it mean when directive will load then the NextPage() function will be called or it has different meaning ?

2) See the directive code first

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)
}
});
}
}
});


What is the meaning of this line
scope.$apply(attrs.infinityscroll)


Hence i am new so i am fumbling when reading article on angular js v1+. so please answer my 2 questions in details to guide me. Thanks

Answer Source

NextPage() is the expression that is evaluated when the Infinite scroll plugin detects that the user has scrolled to the end of the page, or the end of the directive.

scope.$apply(attr.infinityscroll) is telling Angular to run a digest loop after evaluating the expression.

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download