fix(collectionRepeat): rerender when $ionicScrollDelegate resizes

Fixes #1777
ionic-team · Aug 11, 2014 · 5e025fb · 5e025fb
1 parent 9a1f3d7
commit 5e025fb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/js/angular/controller/scrollController.js b/js/angular/controller/scrollController.js
@@ -116,7 +116,9 @@ function($scope, scrollViewOptions, $timeout, $window, $$scrollValueCache, $loca
   };
 
   this.resize = function() {
-    return $timeout(resize);
+    return $timeout(resize).then(function() {
+      $element.triggerHandler('scroll.resize');
+    });
   };
 
   this.scrollTop = function(shouldAnimate) {

diff --git a/js/angular/directive/collectionRepeat.js b/js/angular/directive/collectionRepeat.js
@@ -224,6 +224,7 @@ function($collectionRepeatManager, $collectionDataSource, $parse) {
         var beforeSiblings = [];
         var afterSiblings = [];
         var before = true;
+
         forEach(scrollViewContent.children, function(node, i) {
           if ( ionic.DomUtil.elementIsDescendant($element[0], node, scrollViewContent) ) {
             before = false;
@@ -248,16 +249,17 @@ function($collectionRepeatManager, $collectionDataSource, $parse) {
         dataSource.setData(value, beforeSiblings, afterSiblings);
         collectionRepeatManager.resize();
       }
-      function onWindowResize() {
+      function rerenderOnResize() {
         rerender($scope.$eval(listExpr));
       }
 
-      ionic.on('resize', onWindowResize, window);
+      scrollCtrl.$element.on('scroll.resize', rerenderOnResize);
+      ionic.on('resize', rerenderOnResize, window);
 
       $scope.$on('$destroy', function() {
         collectionRepeatManager.destroy();
         dataSource.destroy();
-        ionic.off('resize', onWindowResize, window);
+        ionic.off('resize', rerenderOnResize, window);
       });
     }
   };

diff --git a/test/unit/angular/directive/collectionRepeat.unit.js b/test/unit/angular/directive/collectionRepeat.unit.js
@@ -152,6 +152,16 @@ describe('collectionRepeat directive', function() {
     expect(scrollView.resize.callCount).toBe(1);
   });
 
+  it('should rerender on scrollCtrl resize', inject(function($timeout) {
+    var el = setup('collection-repeat="item in items" collection-item-height="50"');
+    var scrollCtrl = el.controller('$ionicScroll');
+    repeatManager.resize.reset();
+
+    scrollCtrl.resize();
+    $timeout.flush();
+    expect(repeatManager.resize.callCount).toBe(1);
+  }));
+
   it('$destroy', function() {
     var el = setup('collection-repeat="item in items" collection-item-height="50"');
     dataSource.destroy = jasmine.createSpy('dataSourceDestroy');