다음 예는 단순히AngularJS를 사용하여 데이터의 스크롤 로딩을 구현하는 방법을 기록하기 위한 것입니다. 구체적인 세부 사항은 여전히 자세히 고려해야 합니다.
Javascript 부분의 컨트롤러
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>
중요한 부분은 디렉티브와 스크롤 시 데이터를 불러오는 부분입니다.
더 많은 데이터를 로딩하는 Angularjs의 스크롤링에 대해 에디터가 이것저것 소개해드릴 텐데요, 도움이 되셨으면 좋겠습니다!
더 많은 Angularjs 스크롤 로딩과 데이터 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!