Angular ui.grid 无限滚动不被称为第二次 onwords答案

【问题标题】：Angular ui.grid infinite scroll is not being called second time onwordsAngular ui.grid 无限滚动不被称为第二次 onwords
【发布时间】：2015-11-10 22:04:35
【问题描述】：

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

附加 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>

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

【问题讨论】：

标签： angularjs infinite-scroll angular-ui-grid

【解决方案1】：

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

$scope.gridApi.infiniteScroll.dataLoaded()

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

【讨论】：

谢谢，您的建议很有效。但是我面临一个新问题，而我的所有内容都已完成加载滚动条并没有停留在最后一个结果上。它跳到最后几个结果。这是我发布的另一个与此相关的问题。 stackoverflow.com/questions/33665641/…