Implementierung der Funktion zum automatischen Laden von Daten, wenn die Seite bis zum Ende scrollt, basierend auf AngularJS_AngularJS

Um diese Funktion zu implementieren, können Sie das Drittanbieter-Steuerelement https://github.com/sroze/ngInfiniteScroll verwenden. Die Schritte sind wie folgt:

1. Laden Sie das Programm ng-infinite-scroll.js herunter http://sroze.github.io/ngInfiniteScroll/ Die aktuelle Version ist 1.0.0

2. Wenn Sie jQuery2.0 oder höher verwenden , müssen Sie auch das Programm ng-infinite-scroll.js ändern und alle $window.xxx in $(window) .xxx ändern. elem.xxx wurde in $(elem).xxx

geändert

3. Skript

in HTML einführen

b30fad698bf785b78893da36cc4872f72cacc6d41bbb37262a98f745aa00fbf0
86ae84ff18d651e1e3aa7ff8c065d1052cacc6d41bbb37262a98f745aa00fbf0
58da80a78921fb5d05a46970577c0d122cacc6d41bbb37262a98f745aa00fbf0

4. Der HTML-Beispielcode lautet wie folgt:

 <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. Der Code von PostListController.js lautet wie folgt:

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

Dadurch wird die Funktion des automatischen Ladens von Daten vom Server realisiert, nachdem die Seite an das Ende gezogen wurde.

PS: AngularJS lädt den Ausführungsprozess

1. Laden der HTML-Seite, wodurch das Laden aller auf der Seite enthaltenen JS (einschließlich AngularJS) ausgelöst wird

2. Starten Sie AngularJS und suchen Sie nach allen Anweisungen

3. Suchen Sie nach ng-app, suchen Sie nach dem angegebenen Modul (Modul) und hängen Sie es an die Komponente an, in der sich ng-app befindet.

4. AnguarJS durchläuft alle Unterkomponenten und sucht nach Anweisungen und Bindebefehlen

5. Jedes Mal, wenn ng-controller oder ng-repeat gefunden wird, wird ein Bereich erstellt, der den Kontext der Komponente darstellt. Scope legt die Zugriffsrechte jeder DOM-Komponente auf Funktionen und Variablen fest.

6. AngularJS fügt dann Listener zu den Variablen hinzu und überwacht den aktuellen Wert jeder Variablen. Sobald sich der Wert ändert, aktualisiert AngularJS seine Anzeige auf der Seite.

7. AngularJS hat den Algorithmus zur Überprüfung von Variablen optimiert. Er prüft nur dann, ob Daten aktualisiert werden, wenn bestimmte spezielle Ereignisse ausgelöst werden, anstatt einfach kontinuierlich im Hintergrund abzufragen.