Melaksanakan fungsi memuatkan data secara automatik apabila halaman menatal ke hujung berdasarkan AngularJS_AngularJS

Untuk melaksanakan fungsi ini, anda boleh menggunakan kawalan pihak ketiga https://github.com/sroze/ngInfiniteScroll. Langkah-langkahnya adalah seperti berikut:

1. Muat turun program ng-infinite-scroll.js http://sroze.github.io/ngInfiniteScroll/ Versi semasa ialah 1.0.0

2. Jika anda menggunakan jQuery2.0 atau lebih tinggi , anda juga perlu mengubah suai program ng-infinite-scroll.js dan menukar semua $window.xxx kepada $(window) .xxx, elem.xxx ditukar kepada $(elem).xxx

3. Perkenalkan skrip

ke dalam HTML

4. Kod contoh HTML adalah seperti berikut:

 <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. Kod PostListController.js adalah seperti berikut:

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

Ini merealisasikan fungsi memuatkan data secara automatik daripada pelayan selepas halaman diseret ke penghujung.

PS: Proses pelaksanaan pemuatan AngularJS

1. Memuatkan halaman HTML, yang akan mencetuskan pemuatan semua JS (termasuk AngularJS) yang terkandung dalam halaman

2. Mulakan AngularJS dan cari semua arahan

3. Cari ng-app, cari modulnya (Modul) dan lampirkan pada komponen tempat ng-app berada.

4. AnguarJS merentasi semua sub-komponen, mencari arahan dan mengikat arahan

5. Setiap kali ng-controller atau ng-repeat ditemui, ia akan mencipta skop, iaitu konteks komponen. Skop menentukan hak akses setiap komponen DOM kepada fungsi dan pembolehubah.

6. AngularJS kemudiannya akan menambah pendengar kepada pembolehubah dan memantau nilai semasa setiap pembolehubah. Setelah nilai berubah, AngularJS mengemas kini paparannya pada halaman.

7. AngularJS telah mengoptimumkan algoritma untuk menyemak pembolehubah Ia hanya akan menyemak kemas kini data apabila peristiwa khas tertentu dicetuskan, dan bukannya mengundi secara berterusan di latar belakang.