feat(event): Created stopEvent directive to use for certain ng-click cases, closes #550

Author: Adam Bradley

Diff for: js/ext/angular/src/directive/ionicList.js

@@ -24,14 +24,14 @@ angular.module('ionic.ui.list', ['ngAnimate'])
 
     template: '<div class="item item-complex">\
             <div class="item-edit" ng-if="deleteClick !== undefined">\
-              <button class="button button-icon icon" ng-class="deleteIconClass" ng-click="deleteClick()"></button>\
+              <button class="button button-icon icon" ng-class="deleteIconClass" ng-click="deleteClick()" stop-event="click"></button>\
             </div>\
             <a class="item-content" ng-href="{{ href }}" ng-transclude></a>\
             <div class="item-drag" ng-if="reorderIconClass !== undefined">\
               <button data-ionic-action="reorder" class="button button-icon icon" ng-class="reorderIconClass"></button>\
             </div>\
             <div class="item-options" ng-if="itemOptionButtons">\
-             <button ng-click="b.onTap(item, b)" class="button" ng-class="b.type" ng-repeat="b in itemOptionButtons" ng-bind="b.text"></button>\
+             <button ng-click="b.onTap(item, b)" stop-event="click" class="button" ng-class="b.type" ng-repeat="b in itemOptionButtons" ng-bind="b.text"></button>\
            </div>\
           </div>',
 

Diff for: js/ext/angular/src/directive/ionicTouch.js

@@ -45,7 +45,19 @@ angular.module('ionic.ui.touch', [])
 
     };
 
-  }]);
+  }])
+
+  .directive('stopEvent', function () {
+    function stopEvent(e) {
+      e.stopPropagation();
+    }
+    return {
+      restrict: 'A',
+      link: function (scope, element, attr) {
+        element.bind(attr.stopEvent, stopEvent);
+      }
+    };
+  });
 
 
 })(window.angular, window.ionic);

Diff for: js/ext/angular/test/list.html

@@ -109,7 +109,7 @@ <h1 class="title">List Tests</h1>
               option-buttons="optionButtons1">
 
           <!-- shows that the item directive does not need attributes and can get values from the list attributes -->
-          <item item="item" class="item-message" ng-repeat="item in items" ng-class="{ active: item.isActive}">
+          <item item="item" ng-click="itemClick()" class="item-message" ng-repeat="item in items" ng-class="{ active: item.isActive}">
             <img ng-src="{{item.face}}">
             <h2>{{item.from}}</h2>
             <p>{{item.text}}</p>
@@ -210,6 +210,10 @@ <h1>YELLOW {{slideBox.slideIndex}}</h1>
         };
 
 
+        $scope.itemClick = function() {
+          console.debug('itemClick');
+        };
+
         // Item Methods/Properties
         $scope.deleteItem = function(item) {
           alert('onDelete from the "item" directive on-delete attribute. Lets not delete this item today ok!');