angular infinite scrolling Von REST API im abstrakten Zustand

Question

Ich arbeite an Anwendung in Cordova mit angularjs für die Codierung und infinitescroll for angular für scrollende Remote-API-Aufruf verwendet.

Jetzt ist meine Frage, wie ich dieses Plugin mit Klickereignis für eine Schaltfläche verwenden kann.

Beispiel: Ich muss einen Suchtext eingeben und ich sollte das über API weitergeben, um Details zu erhalten.

Ich muss die ersten 10 Elemente in einem Array bekommen, nachdem es wieder das 10. Element erreicht, ich sollte API für mehr Ergebnisse aufrufen.

unter Snippet ist der Code, was ich bisher für die abstrakte Ansicht geschrieben habe. app.js

.state("sidemenu", { 
 
     url: "/sidemenu", 
 
     abstract: true, 
 
     templateUrl: "app/templates/view-SideMenu.html", 
 
     controller: "sidemenuCtrl" 
 
    }) 
 
    
 
    
 
     .state("sidemenu.networkDetail", { 
 
      url: "/networkDetail", 
 
      templateUrl: "app/templates/view-networkDetail.html", 
 
      controller: "networkDetailCtrl" 
 
     })

Derzeit bin ich in der Lage, die Liste zu bekommen und die Arbeit mit folgenden $ urlRouterProvider scrollen. $ urlRouterProvider.otherwise ("/ networkDetail")

, aber wenn ich das gleiche versucht, mit $ urlRouterProvider.otherwise ("/ sidemenu/networkDetail")

nur die ersten 5 Elemente erscheinen und um die nächsten 5 Daten zu laden, scrollt es nicht von der mobilen Seite.

die Funktionalität i zum Scrollen verwendet werden, sind:

$scope.searchText = ''; 
 
     var requestScrollData =function() { 
 
      this.items= [], 
 
      this.busy=false 
 
     } 
 

 
     var ArraySize = { 
 
      size: 0, 
 
      total: '' 
 
     } 
 

 
     var getRequestData = function (index) { 
 
      if ($scope.searchText === "") { 
 
       console.log("Please input some text..."); 
 
      } 
 
      else { 
 
       return { 
 
        method: 'POST', 
 
        url: searchURL, 
 
        headers: { 
 
         'Authorization': 'Bearer ' + $localstorage.get('access_token', '{}'), 
 
         'Content-Type': 'application/json' 
 
        }, 
 
        data: { 
 
         "start": index.toString(), 
 
         "length": "5" 
 
        } 
 

 
       } 
 
      } 
 
      
 
     }; 
 

 
    requestScrollData.prototype.nextPage = function() { 
 
      if (this.busy) return; 
 
      this.busy = true; 
 

 
      if (ArraySize.total === this.items.length) { 
 
       console.log('no more items to load'); 
 
       ArraySize.size = this.items.length; 
 
       return requestScrollData; 
 
      } 
 
      else { 
 
       $http(getRequestData(ArraySize.size)).then(function (responseData) { 
 
        ArraySize.total = responseData.data.total; 
 
        var items = responseData.data.data; 
 
        for (var i = 0; i < items.length; i++) { 
 
         this.items.push(items[i]); 
 
        } 
 
        ArraySize.size =this.items.length; 
 
        this.busy = false; 
 
       }.bind(this)); 
 
       return requestScrollData; 
 
      } 
 
     
 

 
     }; 
 
$scope.getData = function() { 
 
    
 
     $scope.scrolling = new requestScrollData(); 
 
     $scope.scrolling.nextPage(); 
 
}

und html Teil ..

<div infinite-scroll='scrolling.nextPage()' infinite-scroll-disabled='scrolling.busy' infinite-scroll-distance='0'> 
 
     <div ng-repeat="item in scrolling.items track by $index"> 
 
      
 
      
 
      {{item}} 
 
     </div> 
 
     <div ng-show='scrolling.busy'><h4 style="color:darkgray;text-align:center"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i>&nbsp;Loading data...</h4></div> 
 
    </div>

Answer 1

Basierend auf ngInf ist initeScroll documentation, gibt es ein Attribut infinite-scroll-listen-for-event

infinite-Scroll-Listen-for-Ereignis (optional) genannt - {string} - Der Name des ein Ereignis, das, wenn es empfangen wird, wird die Bildlaufposition verursachen Überprüfen Sie, ob die erneut ausgeführt wird. Dies ist nützlich, wenn Sie den Handler scroll manuell auslösen müssen, z. B. wenn Ihre Artikel gefiltert oder geändert wurden , ohne die Sammlung zu ändern.

So könnte man ein Ereignis auszusenden, wenn Schaltfläche geklickt, und übergeben Sie den Namen des Ereignisses zu infinite-scroll-listen-for-event

<div infinite-scroll='scrolling.nextPage()' 
    infinite-scroll-listen-for-event='RERUN_INFINITE_SCROLL'> 
</div> 

<button ng-click="btnClick()"></button> 

//in controller 
$scope.btnClick = function(){ 
    $scope.$emit('RERUN_INFINITE_SCROLL') 
}