diff --git a/src/components/virtualRepeat/virtual-repeater.js b/src/components/virtualRepeat/virtual-repeater.js index 992e0a78c06..59496c7dbac 100644 --- a/src/components/virtualRepeat/virtual-repeater.js +++ b/src/components/virtualRepeat/virtual-repeater.js @@ -78,7 +78,7 @@ var MAX_ELEMENT_SIZE = 1533917; var NUM_EXTRA = 3; /** @ngInject */ -function VirtualRepeatContainerController($$rAF, $parse, $scope, $element, $attrs) { +function VirtualRepeatContainerController($$rAF, $parse, $window, $scope, $element, $attrs) { this.$scope = $scope; this.$element = $element; this.$attrs = $attrs; @@ -126,17 +126,30 @@ function VirtualRepeatContainerController($$rAF, $parse, $scope, $element, $attr this.sizer = this.scroller.getElementsByClassName('md-virtual-repeat-sizer')[0]; this.offsetter = this.scroller.getElementsByClassName('md-virtual-repeat-offsetter')[0]; - $$rAF(angular.bind(this, this.updateSize)); - - // TODO: Come up with a more robust (But hopefully also quick!) way of - // detecting that we're not visible. - if ($attrs.ngHide) { - $scope.$watch($attrs.ngHide, angular.bind(this, function(hidden) { - if (!hidden) { - $$rAF(angular.bind(this, this.updateSize)); - } - })); - } + // $$rAF(angular.bind(this, this.updateSize)); +// +// // TODO: Come up with a more robust (But hopefully also quick!) way of +// // detecting that we're not visible. +// if ($attrs.ngHide) { +// $scope.$watch($attrs.ngHide, angular.bind(this, function(hidden) { +// if (!hidden) { +// $$rAF(angular.bind(this, this.updateSize)); +// } +// })); +// } + + var boundUpdateSize = angular.bind(this, this.updateSize); + $$rAF(function() { + boundUpdateSize(); + + var jWindow = angular.element($window); + jWindow.on('resize', boundUpdateSize); + $scope.$on('$destroy', function() { + jWindow.off('resize', boundUpdateSize); + }); + + $scope.$on('$md-resize', boundUpdateSize); + }); } diff --git a/src/components/virtualRepeat/virtual-repeater.spec.js b/src/components/virtualRepeat/virtual-repeater.spec.js index 00aadcb3bdb..248b0cd3488 100644 --- a/src/components/virtualRepeat/virtual-repeater.spec.js +++ b/src/components/virtualRepeat/virtual-repeater.spec.js @@ -13,7 +13,7 @@ describe('', function() { ' style="height: 10px; width: 10px; box-sizing: border-box;">' + ' {{i}} {{$index}}' + ''; - var container, repeater, component, $$rAF, $compile, $document, scope, + var container, repeater, component, $$rAF, $compile, $document, $window, scope, scroller, sizer, offsetter; var NUM_ITEMS = 110, @@ -21,7 +21,7 @@ describe('', function() { HORIZONTAL_PX = 150, ITEM_SIZE = 10; - beforeEach(inject(function(_$$rAF_, _$compile_, _$document_, $rootScope, _$material_) { + beforeEach(inject(function(_$$rAF_, _$compile_, _$document_, $rootScope, _$window_, _$material_) { repeater = angular.element(REPEATER_HTML); container = angular.element(CONTAINER_HTML).append(repeater); component = null; @@ -29,6 +29,7 @@ describe('', function() { $material = _$material_; $compile = _$compile_; $document = _$document_; + $window = _$window_; scope = $rootScope.$new(); scope.startIndex = 0; scroller = null; @@ -520,6 +521,32 @@ describe('', function() { expect(scroller[0].scrollTop).toBe(25 * ITEM_SIZE); }); + it('should recheck container size on window resize', function() { + scope.items = createItems(100); + createRepeater(); + // Expect 13 children (10 + 3 extra). + expect(offsetter.children().length).toBe(13); + + container.css('height', '400px'); + angular.element($window).triggerHandler('resize'); + + // Expect 43 children (40 + 3 extra). + expect(offsetter.children().length).toBe(43); + }); + + it('should recheck container size on $md-resize scope event', function() { + scope.items = createItems(100); + createRepeater(); + // Expect 13 children (10 + 3 extra). + expect(offsetter.children().length).toBe(13); + + container.css('height', '400px'); + scope.$parent.$broadcast('$md-resize'); + + // Expect 43 children (40 + 3 extra). + expect(offsetter.children().length).toBe(43); + }); + /** * Facade to access transform properly even when jQuery is used; * since jQuery's css function is obtaining the computed style (not wanted)