2015-11-10 75 views
1

我的無限滾動不起作用的第二次。我的意思是它第一次加載數據時滾動,加載後它也將數據附加到我的數據集,但再次如果我滾動然後它不會調用我的加載方法。角度ui.grid無限滾動不被稱爲第二次的onwords

附加Plunker here。用$超時刪除$ http代碼,以便在plunker上重現問題。 $超時也同樣的問題仍然存在。

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

看來我失蹤1向下滾動負荷後一些事件附件。 請幫忙。

回答

1

您確實錯過了通知,您的新數據已加載。

$scope.gridApi.infiniteScroll.dataLoaded()

這裏是your Plunkr的更新版本。在app.js中查看第36行。

+0

謝謝,您的建議工作良好。但是,我面臨一個新問題,而我的所有內容完成加載滾動條不會停留在最後的結果。它跳轉到最後的幾個結果。這是我發佈的另一個相關問題。 http://stackoverflow.com/questions/33665641/how-to-stop-infinite-scrolling-of-ui-grid-while-content-loading-finish –