Angular ui.grid 无限滚动不会被第二次调用 onwords [英] 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.
附加 Plunker 此处.删除了带有 $timeout 的 $http 代码以在 plunker 上重现问题.$timeout 同样的问题仍然存在.
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.
推荐答案
您确实错过了新数据已加载的通知.
You are indeed missing the notification, that your new data was loaded.
$scope.gridApi.infiniteScroll.dataLoaded()
这是您的 Plunkr 的更新版本.请参阅 app.js 中的第 36 行.
Here is an updated version of your Plunkr. See line 36 in app.js.
这篇关于Angular ui.grid 无限滚动不会被第二次调用 onwords的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
