fix(virtualRepeat): Add ability for container to resize after creation

Closes #5561.

Author: kseamon

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);
+  });
 }
 
 

src/components/virtualRepeat/virtual-repeater.spec.js

@@ -13,22 +13,23 @@ describe('<md-virtual-repeat>', function() {
       '     style="height: 10px; width: 10px; box-sizing: border-box;">' +
       '       {{i}} {{$index}}' +
       '</div>';
-  var container, repeater, component, $$rAF, $compile, $document, scope,
+  var container, repeater, component, $$rAF, $compile, $document, $window, scope,
       scroller, sizer, offsetter;
 
   var NUM_ITEMS = 110,
       VERTICAL_PX = 100,
       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;
     $$rAF = _$$rAF_;
     $material = _$material_;
     $compile = _$compile_;
     $document = _$document_;
+    $window = _$window_;
     scope = $rootScope.$new();
     scope.startIndex = 0;
     scroller = null;
@@ -520,6 +521,32 @@ describe('<md-virtual-repeat>', 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)