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

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.