Implémentation de la fonction de chargement automatique des données lorsque la page défile jusqu'à la fin basée sur AngularJS_AngularJS

Pour implémenter cette fonction, vous pouvez utiliser le contrôle tiers https://github.com/sroze/ngInfiniteScroll. Les étapes sont les suivantes :

1. Téléchargez le programme ng-infinite-scroll.js http://sroze.github.io/ngInfiniteScroll/ La version actuelle est 1.0.0

2. Si vous utilisez jQuery2.0 ou supérieur , vous devez également modifier le programme ng-infinite-scroll.js et remplacer tous les $window.xxx par $(window) .xxx, elem.xxx a été remplacé par $(elem).xxx

3. Introduire le script

dans le HTML

b30fad698bf785b78893da36cc4872f72cacc6d41bbb37262a98f745aa00fbf0
86ae84ff18d651e1e3aa7ff8c065d1052cacc6d41bbb37262a98f745aa00fbf0
58da80a78921fb5d05a46970577c0d122cacc6d41bbb37262a98f745aa00fbf0

4. L'exemple de code HTML est le suivant :

 <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. Le code de PostListController.js est le suivant :

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

Cela réalise la fonction de chargement automatique des données du serveur une fois la page glissée jusqu'à la fin.

PS : Processus d'exécution du chargement d'AngularJS

1. Chargement de la page HTML, qui déclenchera le chargement de tous les JS (y compris AngularJS) contenus dans la page

2. Démarrez AngularJS et recherchez toutes les directives

3. Recherchez ng-app, recherchez son module spécifié (Module) et attachez-le au composant où se trouve ng-app.

4. AnguarJS parcourt tous les sous-composants, à la recherche d'instructions et de commandes de liaison

5. Chaque fois que ng-controller ou ng-repeat est trouvé, il créera une portée, qui est le contexte du composant. Scope spécifie les droits d'accès de chaque composant DOM aux fonctions et variables.

6. AngularJS ajoutera ensuite des écouteurs aux variables et surveillera la valeur actuelle de chaque variable. Une fois la valeur modifiée, AngularJS met à jour son affichage sur la page.

7. AngularJS a optimisé l'algorithme de vérification des variables. Il vérifiera uniquement les mises à jour des données lorsque certains événements spéciaux sont déclenchés, au lieu de simplement interroger en continu en arrière-plan.