fix(collectionRepeat): fix problem with option & delete buttons

Closes #3280.
ionic-team · Mar 11, 2015 · 2c2662f · 2c2662f
1 parent 4f35d8e
commit 2c2662f
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/js/angular/directive/collectionRepeat.js b/js/angular/directive/collectionRepeat.js
@@ -300,8 +300,8 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
         parsedValue = $parse(attrValue);
       }
 
-      var withoutQuotes = attrValue.replace(/(\'|\"|px|%)/g, '').trim();
-      var isConstant = withoutQuotes.length && !/([a-zA-Z]|\$|:|\?)/.test(withoutQuotes);
+      var constantAttrValue = attrValue.replace(/(\'|\"|px|%)/g, '').trim();
+      var isConstant = constantAttrValue.length && !/([a-zA-Z]|\$|:|\?)/.test(constantAttrValue);
       dimensionData.attrValue = attrValue;
 
       // If it's a constant, it's either a percent or just a constant pixel number.
@@ -560,7 +560,6 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
           delete itemsShownMap[i];
           itemsLeaving.push(item);
           item.isShown = false;
-          item.scope.$broadcast('$collectionRepeatChange');
         }
       }
 
@@ -669,6 +668,7 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
             if (item.isShown) {
               count--;
               if (!rootScopePhase) item.scope.$digest();
+              item.scope.$broadcast('$collectionRepeatLeave');
             }
           }
           $$rAF(process);

diff --git a/js/angular/directive/item.js b/js/angular/directive/item.js
@@ -28,7 +28,7 @@ var ITEM_TPL_CONTENT =
 * ```
 */
 IonicModule
-.directive('ionItem', function() {
+.directive('ionItem', ['$$rAF', function($$rAF) {
       var nextId = 0;
   return {
     restrict: 'E',
@@ -66,12 +66,18 @@ IonicModule
 
         var content = $element[0].querySelector('.item-content');
         if (content) {
-          $scope.$on('$collectionRepeatChange', function() {
-            content && (content.style[ionic.CSS.TRANSFORM] = 'translate3d(0,0,0)');
+          $scope.$on('$collectionRepeatLeave', function() {
+            if (content) {
+              content.style[ionic.CSS.TRANSFORM] = '';
+              content.style[ionic.CSS.TRANSITION] = 'none';
+              $$rAF(function() {
+                content.style[ionic.CSS.TRANSITION] = '';
+              });
+            }
           });
         }
       };
 
     }
   };
-});
+}]);
diff --git a/js/angular/directive/itemDeleteButton.js b/js/angular/directive/itemDeleteButton.js
@@ -33,7 +33,7 @@ IonicModule
 .directive('ionDeleteButton', function() {
   return {
     restrict: 'E',
-    require: ['^ionItem', '^?ionList'],
+    require: ['^^ionItem', '^?ionList'],
     //Run before anything else, so we can move it before other directives process
     //its location (eg ngIf relies on the location of the directive in the dom)
     priority: Number.MAX_VALUE,
@@ -48,8 +48,13 @@ IonicModule
         container.append($element);
         itemCtrl.$element.append(container).addClass('item-left-editable');
 
-        if (listCtrl && listCtrl.showDelete()) {
-          container.addClass('visible active');
+        init();
+        $scope.$on('$ionic.reconnectScope', init);
+        function init() {
+          listCtrl = listCtrl || $element.controller('ionList');
+          if (listCtrl && listCtrl.showDelete()) {
+            container.addClass('visible active');
+          }
         }
       };
     }

diff --git a/test/html/collection-repeat/basic-list.html b/test/html/collection-repeat/basic-list.html
@@ -13,12 +13,15 @@
 
   <body ng-controller="MainCtrl">
     <ion-header-bar class="bar-positive">
+      <button class="button" ng-click="$root.showDelete = !$root.showDelete">Toggle Delete</button>
       <h1 class="title">Basic List: Static Dimensions</h1>
     </ion-header-bar>
     <ion-content>
       <h4>WHATS UP</h4>
-      <ion-list can-swipe="true">
+      <ion-list can-swipe="true" show-delete="$root.showDelete">
         <ion-item class="item" collection-repeat="item in items">
+          <ion-option-button>Button</ion-option-button>
+          <ion-delete-button  class="ion-minus-circled" ng-click="items.splice($index, 1)"></ion-delete-button>
           <h2>{{item.text}}</h2>
         </ion-item>
       </ion-list>