Angularjs 滾動式載入更多資料_AngularJS

下面的例子只是為了簡單記錄怎麼使用angularjs來實現滾動式載入資料，具體的還是需要具體看待:

Javascript部分的controller

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

下面是HTML部分：

<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>

重要的部分是指令(directive)和滾動時要載入資料的部分。

Angularjs 滾動式載入更多資料的相關知識，小編就給大家介紹這麼多，希望對大家有所協助！