amend(collectionRepeat): allow async loading of data

Closes #3226.
ionic-team · Mar 4, 2015 · 80a6e63 · 80a6e63
1 parent 6c55554
commit 80a6e63
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 34 deletions.
diff --git a/js/angular/directive/collectionRepeat.js b/js/angular/directive/collectionRepeat.js
@@ -88,8 +88,8 @@ var ONE_PX_TRANSPARENT_IMG_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP//
 var WIDTH_HEIGHT_REGEX = /height:.*?px;\s*width:.*?px/;
 var DEFAULT_RENDER_BUFFER = 3;
 
-CollectionRepeatDirective.$inject = ['$ionicCollectionManager', '$parse', '$window', '$$rAF'];
-function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$rAF) {
+CollectionRepeatDirective.$inject = ['$ionicCollectionManager', '$parse', '$window', '$$rAF', '$rootScope', '$timeout'];
+function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$rAF, $rootScope, $timeout) {
   return {
     restrict: 'A',
     priority: 1000,
@@ -118,6 +118,7 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
     }
     var keyExpr = match[1];
     var listExpr = match[2];
+    var listGetter = $parse(listExpr);
     var heightData = {};
     var widthData = {};
     var computedStyleDimensions = {};
@@ -166,8 +167,7 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
     );
     if (!afterItemsContainer.length) {
       var elementIsAfterRepeater = false;
-      var afterNodes = [].filter.call(scrollView.__content.childNodes, function(node) {
-        if (ionic.DomUtil.contains(node, containerNode)) {
+      var afterNodes = [].filter.call(scrollView.__content.childNodes, function(node) { if (ionic.DomUtil.contains(node, containerNode)) {
           elementIsAfterRepeater = true;
           return false;
         }
@@ -200,6 +200,38 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
       repeatManager = null;
     });
 
+    function getRepeatManager() {
+      return repeatManager || (repeatManager = new $ionicCollectionManager({
+        afterItemsNode: afterItemsContainer[0],
+        containerNode: containerNode,
+        heightData: heightData,
+        widthData: widthData,
+        forceRefreshImages: !!(isDefined(attr.forceRefreshImages) && attr.forceRefreshImages !== 'false'),
+        keyExpression: keyExpr,
+        renderBuffer: renderBuffer,
+        scope: scope,
+        scrollView: scrollCtrl.scrollView,
+        transclude: transclude,
+      }));
+    }
+
+    scope.$watchCollection(listGetter, function(newValue) {
+      newValue || (newValue = []);
+
+      if (!angular.isArray(newValue)) {
+        throw new Error("collection-repeat expected an array for '" + listExpr + "', " +
+          "but got a " + typeof value);
+      }
+
+      if (newValue.length) {
+        // Wait for this digest to end before refreshing everything.
+        $timeout(function() {
+          getRepeatManager().refreshData(newValue);
+          refreshDimensions();
+        }, 0, false);
+      }
+    });
+
     // Make sure this resize actually changed the size of the screen
     function validateResize() {
       var h = scrollView.__clientHeight, w = scrollView.__clientWidth;
@@ -239,22 +271,7 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
       // Dynamic dimensions aren't updated on resize. Since they're already dynamic anyway,
       // .getValue() will be used.
 
-      if (!repeatManager) {
-        repeatManager = new $ionicCollectionManager({
-          afterItemsNode: afterItemsContainer[0],
-          containerNode: containerNode,
-          heightData: heightData,
-          widthData: widthData,
-          forceRefreshImages: !!(isDefined(attr.forceRefreshImages) && attr.forceRefreshImages !== 'false'),
-          keyExpression: keyExpr,
-          listExpression: listExpr,
-          renderBuffer: renderBuffer,
-          scope: scope,
-          scrollView: scrollCtrl.scrollView,
-          transclude: transclude,
-        });
-      }
-      repeatManager.refreshLayout();
+      getRepeatManager().refreshLayout();
     }
 
     function parseDimensionAttr(attrValue, dimensionData) {
@@ -319,7 +336,9 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
           computedStyleNode = clone[0];
         });
       }
-      computedStyleScope[keyExpr] = ($parse(listExpr)(scope) || [])[0];
+
+      computedStyleScope[keyExpr] = (listGetter(scope) || [])[0];
+      if (!$rootScope.$$phase) computedStyleScope.$digest();
       containerNode.appendChild(computedStyleNode);
 
       var style = $window.getComputedStyle(computedStyleNode);
@@ -344,7 +363,6 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
     var heightData = options.heightData;
     var widthData = options.widthData;
     var keyExpression = options.keyExpression;
-    var listExpression = options.listExpression;
     var renderBuffer = options.renderBuffer;
     var scope = options.scope;
     var scrollView = options.scrollView;
@@ -469,16 +487,7 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
       }
     };
 
-
-
     this.refreshData = function(newData) {
-      newData || (newData = []);
-
-      if (!angular.isArray(newData)) {
-        throw new Error("collection-repeat expected an array for '" + listExpression + "', " +
-          "but got a " + typeof value);
-      }
-
       data = newData;
       (view.onRefreshData || angular.noop)();
 
@@ -489,7 +498,6 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
       }
     };
 
-    var unwatch = scope.$watchCollection(listExpression, angular.bind(this, this.refreshData));
     this.destroy = function() {
       render.destroyed = true;
       unwatch();

diff --git a/test/html/collection-repeat/basic-list.html b/test/html/collection-repeat/basic-list.html
@@ -27,16 +27,20 @@ <h2>Stuff after list</h2>
     </ion-content>
   <script>
 angular.module('ionic').controller('MainCtrl',MainCtrl)
-function MainCtrl($scope, $ionicScrollDelegate, $timeout, $q, $ionicLoading, $ionicModal) {
+function MainCtrl($scope, $timeout) {
   $scope.items = [];
+
   function addImage() {
     var i = $scope.items.length;
     $scope.items.push({
       text: 'Item ' + i,
       image: 'http://placekitten.com/'+(100+50%i)+'/'+(100+50%i)
     });
   }
-  for (var i = 0; i < 100; i++) addImage();
+
+  $timeout(function() {
+    for (var i = 0; i < 100; i++) addImage();
+  }, 1000);
 }
   </script>
   <style>