AngularJS_AngularJS 기반으로 페이지 스크롤 시 자동으로 데이터를 로딩하는 기능 구현

이 기능을 구현하려면 타사 컨트롤 https://github.com/sroze/ngInfiniteScroll을 사용할 수 있습니다. 단계는 다음과 같습니다.

1. ng-infinite-scroll.js 프로그램을 다운로드하세요 http://sroze.github.io/ngInfiniteScroll/ 현재 버전은 1.0.0

2. jQuery2.0 이상을 사용하는 경우 ng-infinite-scroll.js 프로그램을 수정하고 $window.xxx를 모두 $(window) .xxx로 변경해야 합니다. elem.xxx가 $(elem).xxx로 변경되었습니다

3. HTML에 스크립트

를 도입합니다.

b30fad698bf785b78893da36cc4872f72cacc6d41bbb37262a98f745aa00fbf0
86ae84ff18d651e1e3aa7ff8c065d1052cacc6d41bbb37262a98f745aa00fbf0
58da80a78921fb5d05a46970577c0d122cacc6d41bbb37262a98f745aa00fbf0

4. HTML 샘플 코드는 다음과 같습니다.

 <div ng-controller='PostListController'>
   <div infinite-scroll='demo.nextPage()' infinite-scroll-disabled='demo.busy' infinite-scroll-distance=''>
     <div ng-repeat='item in demo.items'>
       <p>
         <input type="hidden" value="{{item.PostId}}" />
         <label>{{item.WriterName}}</label>
         <label>{{item.WriterMail}}</label>
         <label>{{item.WreckerName}}</label>
         <label>{{item.StartDate}}</label>
         <label>{{item.Location}}</label>
         <label>{{item.Story}}</label>
       </p>
     </div>
     <div ng-show='demo.busy'>Loading data...</div>
   </div>
 </div>

5. PostListController.js 코드는 다음과 같습니다.

 var ftitAppModule = angular.module('ftitApp', ['infinite-scroll']);
 ftitAppModule.controller('PostListController', 
   function ($scope, Demo) {
     $scope.demo = new Demo();
 });
 // 创建后台数据交互工厂
 ftitAppModule.factory('Demo', function ($http) {
   var Demo = function () {
     this.items = [];
     this.busy = false;
     this.after = '';
     this.page = ;
   };
   Demo.prototype.nextPage = function () {
     if (this.busy) return;
     this.busy = true;
     var url = "http://...:/api/post/nextpage?id=" + this.page + "&callback=JSON_CALLBACK";
     $http.jsonp(url).success(function (data) {
       var items = data;
       for (var i = ; i < items.length; i++) {
         this.items.push(items[i]);
       }
       this.after = "t_" + this.items[this.items.length - ].id;
       this.busy = false;
       this.page += ;
     }.bind(this));
   };
   return Demo;
 });

페이지를 끝까지 드래그한 후 서버에서 자동으로 데이터를 로드하는 기능을 구현합니다.

PS: AngularJS 로딩 실행 프로세스

1. 페이지에 포함된 모든 JS(AngularJS 포함)의 로드를 트리거하는 HTML 페이지 로드

2. AngularJS를 시작하고 모든 지시어를 검색합니다

3.ng-app을 찾아 해당 모듈(Module)을 검색하여 ng-app이 위치한 컴포넌트에 첨부합니다.

4. AnguarJS는 모든 하위 구성 요소를 탐색하여 지침과 바인드 명령을 찾습니다

5. ng-controller 또는 ng-repeat가 발견될 때마다 구성 요소의 컨텍스트인 범위를 생성합니다. 범위는 함수 및 변수에 대한 각 DOM 구성 요소의 액세스 권한을 지정합니다.

6. 그런 다음 AngularJS는 변수에 리스너를 추가하고 각 변수의 현재 값을 모니터링합니다. 값이 변경되면 AngularJS는 페이지의 표시를 업데이트합니다.

7. AngularJS는 단순히 백그라운드에서 지속적으로 폴링하는 대신 특정 특수 이벤트가 트리거될 때만 변수 확인 알고리즘을 최적화했습니다.