diff --git a/src/components/virtualRepeat/virtual-repeater.js b/src/components/virtualRepeat/virtual-repeater.js index 073a1587021..ed5eb401dbe 100644 --- a/src/components/virtualRepeat/virtual-repeater.js +++ b/src/components/virtualRepeat/virtual-repeater.js @@ -132,19 +132,26 @@ function VirtualRepeatContainerController( // make a best effort at re-measuring as it changes. var boundUpdateSize = angular.bind(this, this.updateSize); - $$rAF(function() { + $$rAF(angular.bind(this, function() { boundUpdateSize(); var debouncedUpdateSize = $mdUtil.debounce(boundUpdateSize, 10, null, false); var jWindow = angular.element($window); + // Make one more attempt to get the size if it is 0. + // This is not by any means a perfect approach, but there's really no + // silver bullet here. + if (!this.size) { + debouncedUpdateSize(); + } + jWindow.on('resize', debouncedUpdateSize); $scope.$on('$destroy', function() { jWindow.off('resize', debouncedUpdateSize); }); $scope.$on('$md-resize', boundUpdateSize); - }); + })); } @@ -187,6 +194,7 @@ VirtualRepeatContainerController.prototype.updateSize = function() { this.size = this.isHorizontal() ? this.$element[0].clientWidth : this.$element[0].clientHeight; + this.repeater && this.repeater.containerUpdated(); }; diff --git a/src/components/virtualRepeat/virtual-repeater.spec.js b/src/components/virtualRepeat/virtual-repeater.spec.js index 69902d03a83..b1b5176a019 100644 --- a/src/components/virtualRepeat/virtual-repeater.spec.js +++ b/src/components/virtualRepeat/virtual-repeater.spec.js @@ -22,7 +22,7 @@ describe('', function() { ITEM_SIZE = 10; beforeEach(inject(function( - _$$rAF_, _$compile_, _$document_, _$mdUtil_, $rootScope, _$window_, _$material_) { + _$$rAF_, _$compile_, _$document_, _$mdUtil_, $rootScope, _$timeout_, _$window_, _$material_) { repeater = angular.element(REPEATER_HTML); container = angular.element(CONTAINER_HTML).append(repeater); component = null; @@ -31,6 +31,7 @@ describe('', function() { $mdUtil = _$mdUtil_; $compile = _$compile_; $document = _$document_; + $timeout = _$timeout_; $window = _$window_; scope = $rootScope.$new(); scope.startIndex = 0; @@ -582,6 +583,25 @@ describe('', function() { expect(offsetter.children().length).toBe(43); }); + it('makes a second attempt to measure the size if it starts out at 0', + function() { + // Create the repeater before appending it to the body. + scope.items = createItems(100); + component = $compile(container)(scope); + $material.flushOutstandingAnimations(); + angular.element($document[0].body).append(container); + offsetter = angular.element(component[0].querySelector('.md-virtual-repeat-offsetter')); + + // Expect 3 children (0 + 3 extra). + expect(offsetter.children().length).toBe(3); + + // Expect it to remeasure using debounce. + $timeout.flush(); + + // Expect 13 children (10 + 3 extra). + expect(offsetter.children().length).toBe(13); + }); + /** * Facade to access transform properly even when jQuery is used; * since jQuery's css function is obtaining the computed style (not wanted) @@ -589,6 +609,4 @@ describe('', function() { function getTransform(target) { return target[0].style.webkitTransform || target.css('transform'); } - - });