Angularjs scrolling to load more data

The following example is just to simply record how to use angularjs to implement scrolling loading of data. The specific details still need to be viewed in detail:

The controller of the Javascript part

app.controller('AnalysizerCtrl', ['$scope', '$timeout', '$window',
function ($scope, $timeout, $window) {
$scope.showData = false;
$scope.isLoadingPIG = false;
$scope.isLoadingUJ = false;
$scope.isLoadingBoxSummary = false;
$scope.LoadingData = function (index) {
$scope.showData = true;
var pigHeight = $(".analysisContainer")[1].children[1].scrollHeight;
var ujHeight = $(".analysisContainer")[1].children[2].scrollHeight;
var boxSummaryHeight = $(".analysisContainer")[1].children[3].scrollHeight;
if (index == 0) {
//$scope.reLoadData = true;
pigHeight = 0;
ujHeight = 0;
$scope.gridOptions.data = null;
}
var showSummaryBox = function () {
$scope.isLoadingBoxSummary = false;
}
var showUj = function () {
$scope.isLoadingUJ = false;
//$scope.isLoadingSummaryBox = true;
//$timeout(showSummaryBox, 1000);
}
var showPig = function () {
$scope.isLoadingPIG = false;
//$scope.isLoadingUJ = false;
//$timeout(showUj, 10000);
}
if (pigHeight == 0) {
$scope.isLoadingPIG = true;
$timeout(showPig, 1000);
} else if (ujHeight == 0) {
$scope.isLoadingUJ = true;
$timeout(showUj, 1000);
} else if (boxSummaryHeight == 0) {
$scope.isLoadingBoxSummary = true;
$timeout(showSummaryBox, 1000);
}
};
}]
).directive('whenScrollEnd', function () {
return function (scope, elm, attr) {
var pageWindow = $(this);
pageWindow.bind('scroll', function (et, ed, pb) {
var winScrollTop = pageWindow.scrollTop();
var winHeight = pageWindow.height();
var maxScrollHeight = $(".analysisContainer")[1].scrollHeight;
if ((winScrollTop + winHeight) > maxScrollHeight) {
scope.$apply(attr.whenScrollEnd);
}
});
}
});

The following is the HTML part ：

<div class="analysisContainer" ng-show="showData" when-scroll-end="LoadingData()">
<div id="b" ng-show="isLoadingPIG" style="width: 100%; text-align: center; z-index: 1">
<h6 class="loading">
<img src="~/Content/Images/loading2.gif" />
Loading Win & Convert data...
</h6>
</div>
<div id="a" ng-show="!isLoadingPIG">
<img src="~/2016-03-16_152323.png" />
</div>
<div ng-show="!isLoadingUJ">
<img src="~/2016-03-16_153347.png" />
</div>
<div ng-show="!isLoadingBoxSummary">
<img src="~/2016-03-16_153404.png" />
</div>
</div>

The important part is the directive and the part to load data when scrolling.

Angularjs scrolling loading of more data related knowledge, the editor will introduce you to this much, I hope it will be helpful to everyone!

For more Angularjs scrolling loading of more data related articles, please pay attention to the PHP Chinese website!