diff --git a/ionic/components/item/item-sliding.ts b/ionic/components/item/item-sliding.ts index 657ed0958e..1497be6926 100644 --- a/ionic/components/item/item-sliding.ts +++ b/ionic/components/item/item-sliding.ts @@ -10,6 +10,23 @@ import * as util from 'ionic/util'; import {CSS, raf} from 'ionic/util/dom'; + +@Directive({ + selector: 'ion-item-options > button,ion-item-options > [button]', + host: { + '(click)': 'clicked($event)' + } +}) +export class ItemSlidingOptionButton { + constructor(elementRef: ElementRef) { + } + clicked(event) { + // Don't allow the click to propagate + event.preventDefault(); + event.stopPropagation(); + } +} + /** * @name ionItem * @description @@ -41,8 +58,7 @@ import {CSS, raf} from 'ionic/util/dom'; '' + ''+ '' + - '', - directives: [NgIf] + '' }) export class ItemSliding { /** diff --git a/ionic/components/item/test/sliding/index.ts b/ionic/components/item/test/sliding/index.ts index 23c468db94..edf8bf5718 100644 --- a/ionic/components/item/test/sliding/index.ts +++ b/ionic/components/item/test/sliding/index.ts @@ -17,6 +17,13 @@ class E2EApp { } didClick(e) { - console.log('CLICK', e) + console.log('CLICK', e.defaultPrevented, e) + } + + archive(e) { + console.log('Accept', e); + } + del(e) { + console.log('Delete', e); } } diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html index ae29dcc1a7..2cce43fbbf 100644 --- a/ionic/components/item/test/sliding/main.html +++ b/ionic/components/item/test/sliding/main.html @@ -8,7 +8,8 @@ Hey do you want to go to the game tonight?

- + + diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts index e62e298ba2..71595081c7 100644 --- a/ionic/config/directives.ts +++ b/ionic/config/directives.ts @@ -15,7 +15,7 @@ import {Tab} from '../components/tabs/tab'; import {List, ListHeader} from '../components/list/list'; import {Item} from '../components/item/item'; import {ItemGroup, ItemGroupTitle} from '../components/item/item-group'; -import {ItemSliding} from '../components/item/item-sliding'; +import {ItemSliding, ItemSlidingOptionButton} from '../components/item/item-sliding'; import {Toolbar, ToolbarTitle, ToolbarItem} from '../components/toolbar/toolbar'; import {Icon} from '../components/icon/icon'; import {Checkbox} from '../components/checkbox/checkbox'; @@ -60,6 +60,7 @@ export const IONIC_DIRECTIVES = [ ItemGroup, ItemGroupTitle, ItemSliding, + ItemSlidingOptionButton, // Slides Slides,