Angular ui.grid infinite scroll is not being called second time onwords

问题

My infinite scroll is not working 2nd time onward. I mean it loads the data first time while scrolling, after loading it also append the data to my data set but again if I scroll then it does not calling my load method.

Attached Plunker here. Removed $http code with $timeout to reproduce problem on plunker. $timeout also same problem persist.

var app = angular.module('plunker', ['ui.grid', 'ui.grid.infiniteScroll']);

    angular.module('plunker').controller('ListController',ListController);
    ListController.$inject = ['$scope', '$timeout', '$q'];                              
    function ListController  ( $scope,   $timeout,   $q) {
    	$scope.itemsPerPage = 20;
    	$scope.lastPage = 0;
    	$scope.data = [];
    	
    	var request = {"startAt" : "1","noOfRecords" : $scope.itemsPerPage};
    	
    	$scope.gridOptions = {
		    infiniteScrollDown: true,
		    columnDefs: [
		      { field: 'id', name:'ID'},
		      { field: 'name', name:'My Name'}
		    ],
		    data: 'data',
		    onRegisterApi: function(gridApi){
		      gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.loadMoreData);
		      $scope.gridApi = gridApi;
		    }
		 };
    	
		 
	   $scope.loadMoreData = function() {
	     var promise = $q.defer();
	     $timeout(function () {
           //Sample Data Creation Start
	       var arrayObj = [];
	       for(var i=0; i<$scope.itemsPerPage; i++){
	         arrayObj.push({id:Math.random()*100, name:'Name '+Math.random()});
	       }
           //Sample Data Creation End
	       $scope.data = $scope.data.concat(arrayObj);
			   console.log($scope.data);
			   promise.resolve();
	     }, Math.random()*1000);
	     return promise.promise;
	  };
		
	  	$scope.loadMoreData();
    }

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" type="text/css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="ListController">
    <div data-ui-grid="gridOptions" class="grid" data-ui-grid-infinite-scroll></div>
  </body>

</html>

Seems I am missing some event attachment after 1st scroll down load. Please help.

回答1:

You are indeed missing the notification, that your new data was loaded.

$scope.gridApi.infiniteScroll.dataLoaded()

Here is an updated version of your Plunkr. See line 36 in app.js.

来源：https://stackoverflow.com/questions/33628681/angular-ui-grid-infinite-scroll-is-not-being-called-second-time-onwords

标签

angularjs

infinite-scroll

angular-ui-grid