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

ajoslin · ajoslin · commit 2c2662fe8108 · 2015-03-11T11:12:32.000-06:00
Closes #3280.
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>

Original file line number	Diff line number	Diff line change
`@@ -300,8 +300,8 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r`
`300`	`300`	`parsedValue = $parse(attrValue);`
`301`	`301`	`}`
`302`	`302`
`303`		`- var withoutQuotes = attrValue.replace(/(\'\|\"\|px\|%)/g, '').trim();`
`304`		`- var isConstant = withoutQuotes.length && !/([a-zA-Z]\|\$\|:\|\?)/.test(withoutQuotes);`
	`303`	`+ var constantAttrValue = attrValue.replace(/(\'\|\"\|px\|%)/g, '').trim();`
	`304`	`+ var isConstant = constantAttrValue.length && !/([a-zA-Z]\|\$\|:\|\?)/.test(constantAttrValue);`
`305`	`305`	`dimensionData.attrValue = attrValue;`
`306`	`306`
`307`	`307`	`// 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) {`
`560`	`560`	`delete itemsShownMap[i];`
`561`	`561`	`itemsLeaving.push(item);`
`562`	`562`	`item.isShown = false;`
`563`		`- item.scope.$broadcast('$collectionRepeatChange');`
`564`	`563`	`}`
`565`	`564`	`}`
`566`	`565`
`@@ -669,6 +668,7 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {`
`669`	`668`	`if (item.isShown) {`
`670`	`669`	`count--;`
`671`	`670`	`if (!rootScopePhase) item.scope.$digest();`
	`671`	`+ item.scope.$broadcast('$collectionRepeatLeave');`
`672`	`672`	`}`
`673`	`673`	`}`
`674`	`674`	`$$rAF(process);`