Skip to content

Commit 30af7e9

Browse files
Portugal, Marcelomportuga
Portugal, Marcelo
authored and
mportuga
committed
fix(infinite-scroll): Replace with
Also, update tutorial to follow angular styleguide standards.
1 parent b77ddc3 commit 30af7e9

File tree

2 files changed

+55
-53
lines changed

2 files changed

+55
-53
lines changed

‎misc/tutorial/212_infinite_scroll.ngdoc

+50-48
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,10 @@ Finally, we can reset the data, which gets us back to the middle page and sets t
6767
<file name="app.js">
6868
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.infiniteScroll']);
6969

70-
app.controller('MainCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
71-
$scope.gridOptions = {
70+
app.controller('MainCtrl', function ($scope, $http, $timeout) {
71+
var vm = this;
72+
73+
vm.gridOptions = {
7274
infiniteScrollRowsFromEnd: 40,
7375
infiniteScrollUp: true,
7476
infiniteScrollDown: true,
@@ -79,117 +81,117 @@ Finally, we can reset the data, which gets us back to the middle page and sets t
7981
],
8082
data: 'data',
8183
onRegisterApi: function(gridApi){
82-
gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.getDataDown);
83-
gridApi.infiniteScroll.on.needLoadMoreDataTop($scope, $scope.getDataUp);
84-
$scope.gridApi = gridApi;
84+
gridApi.infiniteScroll.on.needLoadMoreData($scope, getDataDown);
85+
gridApi.infiniteScroll.on.needLoadMoreDataTop($scope, getDataUp);
86+
vm.gridApi = gridApi;
8587
}
8688
};
8789

8890
$scope.data = [];
8991

90-
$scope.firstPage = 2;
91-
$scope.lastPage = 2;
92+
vm.firstPage = 2;
93+
vm.lastPage = 2;
9294

93-
$scope.getFirstData = function() {
95+
function getFirstData() {
9496
return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json')
9597
.then(function(response) {
96-
var newData = $scope.getPage(response.data, $scope.lastPage);
98+
var newData = getPage(response.data, vm.lastPage);
99+
97100
$scope.data = $scope.data.concat(newData);
98101
});
99-
};
102+
}
100103

101-
$scope.getDataDown = function() {
104+
function getDataDown() {
102105
return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json')
103106
.then(function(response) {
104-
$scope.lastPage++;
105-
var newData = $scope.getPage(response.data, $scope.lastPage);
106-
$scope.gridApi.infiniteScroll.saveScrollPercentage();
107+
vm.lastPage++;
108+
var newData = getPage(response.data, vm.lastPage);
109+
vm.gridApi.infiniteScroll.saveScrollPercentage();
107110
$scope.data = $scope.data.concat(newData);
108-
return $scope.gridApi.infiniteScroll.dataLoaded($scope.firstPage > 0, $scope.lastPage < 4).then(function() {$scope.checkDataLength('up');});
111+
return vm.gridApi.infiniteScroll.dataLoaded(vm.firstPage > 0, vm.lastPage < 4).then(function() {checkDataLength('up');});
109112
})
110113
.catch(function(error) {
111-
return $scope.gridApi.infiniteScroll.dataLoaded();
114+
return vm.gridApi.infiniteScroll.dataLoaded();
112115
});
113-
};
116+
}
114117

115-
$scope.getDataUp = function() {
118+
function getDataUp() {
116119
return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json')
117120
.then(function(response) {
118-
$scope.firstPage--;
119-
var newData = $scope.getPage(response.data, $scope.firstPage);
120-
$scope.gridApi.infiniteScroll.saveScrollPercentage();
121+
vm.firstPage--;
122+
var newData = getPage(response.data, vm.firstPage);
123+
vm.gridApi.infiniteScroll.saveScrollPercentage();
121124
$scope.data = newData.concat($scope.data);
122-
return $scope.gridApi.infiniteScroll.dataLoaded($scope.firstPage > 0, $scope.lastPage < 4).then(function() {$scope.checkDataLength('down');});
125+
return vm.gridApi.infiniteScroll.dataLoaded(vm.firstPage > 0, vm.lastPage < 4).then(function() {checkDataLength('down');});
123126
})
124127
.catch(function(error) {
125-
return $scope.gridApi.infiniteScroll.dataLoaded();
128+
return vm.gridApi.infiniteScroll.dataLoaded();
126129
});
127-
};
130+
}
128131

129-
$scope.getPage = function(data, page) {
132+
function getPage(data, page) {
130133
var res = [];
131134
for (var i = (page * 100); i < (page + 1) * 100 && i < data.length; ++i) {
132135
res.push(data[i]);
133136
}
134137
return res;
135-
};
138+
}
136139

137-
$scope.checkDataLength = function( discardDirection) {
140+
function checkDataLength( discardDirection) {
138141
// work out whether we need to discard a page, if so discard from the direction passed in
139-
if( $scope.lastPage - $scope.firstPage > 3 ){
142+
if( vm.lastPage - vm.firstPage > 3 ){
140143
// we want to remove a page
141-
$scope.gridApi.infiniteScroll.saveScrollPercentage();
144+
vm.gridApi.infiniteScroll.saveScrollPercentage();
142145

143146
if( discardDirection === 'up' ){
144147
$scope.data = $scope.data.slice(100);
145-
$scope.firstPage++;
148+
vm.firstPage++;
146149
$timeout(function() {
147150
// wait for grid to ingest data changes
148-
$scope.gridApi.infiniteScroll.dataRemovedTop($scope.firstPage > 0, $scope.lastPage < 4);
151+
vm.gridApi.infiniteScroll.dataRemovedTop(vm.firstPage > 0, vm.lastPage < 4);
149152
});
150153
} else {
151154
$scope.data = $scope.data.slice(0, 400);
152-
$scope.lastPage--;
155+
vm.lastPage--;
153156
$timeout(function() {
154157
// wait for grid to ingest data changes
155-
$scope.gridApi.infiniteScroll.dataRemovedBottom($scope.firstPage > 0, $scope.lastPage < 4);
158+
vm.gridApi.infiniteScroll.dataRemovedBottom(vm.firstPage > 0, vm.lastPage < 4);
156159
});
157160
}
158161
}
159-
};
162+
}
160163

161-
$scope.reset = function() {
162-
$scope.firstPage = 2;
163-
$scope.lastPage = 2;
164+
vm.reset = function() {
165+
vm.firstPage = 2;
166+
vm.lastPage = 2;
164167

165168
// turn off the infinite scroll handling up and down - hopefully this won't be needed after @swalters scrolling changes
166-
$scope.gridApi.infiniteScroll.setScrollDirections( false, false );
169+
vm.gridApi.infiniteScroll.setScrollDirections( false, false );
167170
$scope.data = [];
168171

169-
$scope.getFirstData().then(function(){
172+
getFirstData().then(function(){
170173
$timeout(function() {
171174
// timeout needed to allow digest cycle to complete,and grid to finish ingesting the data
172-
$scope.gridApi.infiniteScroll.resetScroll( $scope.firstPage > 0, $scope.lastPage < 4 );
175+
vm.gridApi.infiniteScroll.resetScroll( vm.firstPage > 0, vm.lastPage < 4 );
173176
});
174177
});
175178
};
176179

177-
$scope.getFirstData().then(function(){
180+
getFirstData().then(function(){
178181
$timeout(function() {
179182
// timeout needed to allow digest cycle to complete,and grid to finish ingesting the data
180183
// you need to call resetData once you've loaded your data if you want to enable scroll up,
181184
// it adjusts the scroll position down one pixel so that we can generate scroll up events
182-
$scope.gridApi.infiniteScroll.resetScroll( $scope.firstPage > 0, $scope.lastPage < 4 );
185+
vm.gridApi.infiniteScroll.resetScroll( vm.firstPage > 0, vm.lastPage < 4 );
183186
});
184187
});
185-
186-
}]);
188+
});
187189
</file>
188190
<file name="index.html">
189-
<div ng-controller="MainCtrl">
190-
<button id="reset" class="button" ng-click="reset()">Reset</button>
191-
<span> &nbsp; &nbsp; First page: {{ firstPage }} &nbsp; &nbsp; Last page: {{ lastPage }} &nbsp; &nbsp; data.length: {{ data.length }} </span>
192-
<div ui-grid="gridOptions" class="grid" ui-grid-infinite-scroll></div>
191+
<div ng-controller="MainCtrl as $ctrl">
192+
<button id="reset" class="button" ng-click="$ctrl.reset()">Reset</button>
193+
<span> &nbsp; &nbsp; First page: {{ $ctrl.firstPage }} &nbsp; &nbsp; Last page: {{ $ctrl.lastPage }} &nbsp; &nbsp; data.length: {{ data.length }} </span>
194+
<div ui-grid="$ctrl.gridOptions" class="grid" ui-grid-infinite-scroll></div>
193195
</div>
194196
</file>
195197
<file name="main.css">

‎src/features/infinite-scroll/js/infinite-scroll.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
*
2121
* @description Service for infinite scroll features
2222
*/
23-
module.service('uiGridInfiniteScrollService', ['gridUtil', '$compile', '$timeout', 'uiGridConstants', 'ScrollEvent', '$q', function (gridUtil, $compile, $timeout, uiGridConstants, ScrollEvent, $q) {
23+
module.service('uiGridInfiniteScrollService', ['gridUtil', '$compile', '$rootScope', 'uiGridConstants', 'ScrollEvent', '$q', function (gridUtil, $compile, $rootScope, uiGridConstants, ScrollEvent, $q) {
2424

2525
var service = {
2626

@@ -351,7 +351,7 @@
351351
*
352352
* If we're scrolling up we scroll to the first row of the old data set -
353353
* so we're assuming that you would have gotten to the top of the grid (from the 20% need more data trigger) by
354-
* the time the data comes back. If we're scrolling down we scoll to the last row of the old data set - so we're
354+
* the time the data comes back. If we're scrolling down we scroll to the last row of the old data set - so we're
355355
* assuming that you would have gotten to the bottom of the grid (from the 80% need more data trigger) by the time
356356
* the data comes back.
357357
*
@@ -365,7 +365,7 @@
365365
*/
366366
adjustScroll: function(grid){
367367
var promise = $q.defer();
368-
$timeout(function () {
368+
$rootScope.$applyAsync(function () {
369369
var newPercentage, viewportHeight, rowHeight, newVisibleRows, oldTop, newTop;
370370

371371
viewportHeight = grid.getViewportHeight() + grid.headerHeight - grid.renderContainers.body.headerHeight - grid.scrollbarHeight;
@@ -388,15 +388,15 @@
388388
oldTop = grid.infiniteScroll.prevScrollTop || 0;
389389
newTop = oldTop + (newVisibleRows - grid.infiniteScroll.previousVisibleRows)*rowHeight;
390390
service.adjustInfiniteScrollPosition(grid, newTop);
391-
$timeout( function() {
391+
$rootScope.$applyAsync( function() {
392392
promise.resolve();
393393
});
394394
}
395395

396396
if ( grid.infiniteScroll.direction === uiGridConstants.scrollDirection.DOWN ){
397397
newTop = grid.infiniteScroll.prevScrollTop || (grid.infiniteScroll.previousVisibleRows*rowHeight - viewportHeight);
398398
service.adjustInfiniteScrollPosition(grid, newTop);
399-
$timeout( function() {
399+
$rootScope.$applyAsync( function() {
400400
promise.resolve();
401401
});
402402
}

0 commit comments

Comments
 (0)