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

b30fad698bf785b78893da36cc4872f72cacc6d41bbb37262a98f745aa00fbf0
86ae84ff18d651e1e3aa7ff8c065d1052cacc6d41bbb37262a98f745aa00fbf0
58da80a78921fb5d05a46970577c0d122cacc6d41bbb37262a98f745aa00fbf0

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.