Question

我的无限卷轴第二次不能正常工作。我的意思是它在滚动时第一次加载数据，加载后它还将数据附加到我的数据集但是如果我滚动那么它又不会调用我的加载方法。

附加的Plunker here。使用$ timeout删除$ http代码以重现plunker上的问题。 $ timeout也存在同样的问题。

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>

似乎我在第一次向下滚动加载后错过了一些事件附件。请帮忙。

Answer 1

您确实错过了通知，即您的新数据已加载。

$scope.gridApi.infiniteScroll.dataLoaded()

以下是your Plunkr的更新版本。请参阅app.js中的第36行。

角度ui.grid无限滚动没有第二次被称为

1 个答案: