Angular ui.grid 无限滚动不再被第二次调用

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 行

Angular ui.grid 无限滚动不再被第二次调用

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

infinite-scroll

angularjs

angular-ui-grid