List item button event fix

dist/js/ionic-angular.js

@@ -234,10 +234,11 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
     require: '^list',
     replace: true,
     transclude: true,
+    scope: true,
     scope: {
+      item: '=',
       onSelect: '&',
       onDelete: '&',
-      onButtonClicked: '&',
       canDelete: '@',
       canReorder: '@',
       canSwipe: '@',
@@ -250,10 +251,10 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
                    <div class="list-item-content" ng-transclude>\
                    </div>\
                    <div class="list-item-drag" ng-if="canReorder && isEditing">\
-                     <button data-ionic-action="reorder" class="button button-icon" ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
+                     <button data-ionic-action="reorder" class="button button-icon"><i ng-class="reorderIcon"></i></button>\
                    </div>\
                    <div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
-                     <button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
+                     <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
                    </div>\
                 </li>',
     link: function($scope, $element, $attr, list) {
@@ -261,6 +262,10 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
       $scope.deleteIcon = list.scope.deleteIcon;
       $scope.reorderIcon = list.scope.reorderIcon;
 
+      $scope.buttonClicked = function(button) {
+        button.onButtonClicked && button.onButtonClicked($scope.item, button);
+      };
+
       list.scope.$watch('isEditing', function(v) {
         $scope.isEditing = v;
       });

js/ext/angular/src/directive/ionicList.js

@@ -6,10 +6,11 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
     require: '^list',
     replace: true,
     transclude: true,
+    scope: true,
     scope: {
+      item: '=',
       onSelect: '&',
       onDelete: '&',
-      onButtonClicked: '&',
       canDelete: '@',
       canReorder: '@',
       canSwipe: '@',
@@ -22,10 +23,10 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
                    <div class="list-item-content" ng-transclude>\
                    </div>\
                    <div class="list-item-drag" ng-if="canReorder && isEditing">\
-                     <button data-ionic-action="reorder" class="button button-icon" ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
+                     <button data-ionic-action="reorder" class="button button-icon"><i ng-class="reorderIcon"></i></button>\
                    </div>\
                    <div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
-                     <button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
+                     <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
                    </div>\
                 </li>',
     link: function($scope, $element, $attr, list) {
@@ -33,6 +34,10 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
       $scope.deleteIcon = list.scope.deleteIcon;
       $scope.reorderIcon = list.scope.reorderIcon;
 
+      $scope.buttonClicked = function(button) {
+        button.onButtonClicked && button.onButtonClicked($scope.item, button);
+      };
+
       list.scope.$watch('isEditing', function(v) {
         $scope.isEditing = v;
       });

js/ext/angular/test/tabs.html

@@ -8,6 +8,44 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+    <style>
+      .fade-out > .ng-enter, 
+      .fade-out > .ng-leave, 
+      .fade-out > .ng-move {
+        -webkit-transition: 0.2s linear all;
+        transition: 0.4s ease-out all;
+        position:relative;
+      }
+
+      .fade-out > .ng-enter {
+        left:-10px;
+        opacity:0;
+      }
+      .fade-out > .ng-enter.ng-enter-active {
+        left:0;
+        opacity:1;
+      }
+
+      .fade-out > .ng-leave {
+        left:0;
+        opacity:1;
+      }
+      .fade-out > .ng-leave.ng-leave-active {
+        left:-10px;
+        opacity:0;
+      }
+
+      .fade-out > .ng-move {
+        opacity:0.5;
+      }
+      .fade-out > .ng-move.ng-move-active {
+        opacity:1;
+      }
+
+      .completed {
+        text-decoration: line-through;
+      }
+    </style>
   </head>
   <body>
     <tab-controller>
@@ -18,14 +56,16 @@
           <button class="button button-clear button-primary" ng-click="isEditingItems = !isEditingItems">Edit</button>
         </header>
         <content has-header="true" has-tabs="true">
-          <list is-editing="isEditingItems" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
+          <list is-editing="isEditingItems" animation="fade-out" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
             <list-item ng-repeat="item in items" 
+            item="item"
             buttons="item.buttons"
             can-delete="true"
             can-reorder="true"
             can-swipe="true"
-                     on-delete="deleteProject(project)"
+            on-delete="deleteItem(item)"
-                     on-select="selectProject(project)">
+            ng-class="{completed: item.isCompleted}"
+            >
               {{item.title}}
               <i class="{{item.icon}}"></i>
             </list-item>
@@ -59,11 +99,37 @@
 
       .controller('HomeCtrl', function($scope) {
         $scope.items = [];
+
+        var removeItem = function(item, button) {
+          console.log('Removing item', item);
+          // Remove ourselves
+          $scope.items.splice($scope.items.indexOf(item), 1);
+        };
+        var completeItem = function(item, button) {
+          // Remove ourselves
+          console.log('Completing item', item);
+          item.isCompleted = true;
+        };
+
+        $scope.removeItem = function(item) {
+          removeItem(item);
+        };
+
         for(var i = 0; i < 30; i++) {
           $scope.items.push({
-            title: 'Task ' + (i + 1)
+            title: 'Task ' + (i + 1),
+            buttons: [{
+              text: 'Done',
+              type: 'button-success',
+              onButtonClicked: completeItem,
+            }, {
+              text: 'Delete',
+              type: 'button-danger',
+              onButtonClicked: removeItem,
+            }]
           });
         }
+
       })
 
     </script>