离子：避免重定向离子列表中的按钮

Question

THE SITUATION:

In my Ionic app i am using ion-list .

Each item can swipe to reveal a button (add/remove to favorites).

Each item is a link to the item page.

The problem is that when i click the button, besides triggering the proper function it also activate the link.

THE CODE:

<ion-list can-swipe="true" class="list" ng-repeat="project in project_list">

    <ion-item class="item-content item-text-wrap" ng-click="go_to_project_page( project )">

        <h1 class="custom_h1">{{project.name}}</h1>

        <ion-option-button class="button-small button-balanced" ng-if="current_project_list_type != 'favorites'" ng-click="project_favorite_add( project.project_id )">
            Mark as favorite
        </ion-option-button>

        <ion-option-button class="button-small button-assertive" ng-if="current_project_list_type == 'favorites'" ng-click="project_favorite_remove( project.project_id )">
            Remove from favorites
        </ion-option-button>

    </ion-item>

</ion-list>

THE QUESTION:

There is a way to avoid redicting when clicking on the button? If not an official way, do you know some tricks how this can be achieved?

Thank you!

Answer 1

Since Ionic 0.9.2 there is the directive ion-stop-event that does exactly what you need I suppose. It solves this issue.

To get what you want you need to alter your code like so:

    <ion-option-button ion-stop-event="click" class="button-small button-balanced" ng-if="current_project_list_type != 'favorites'" ng-click="project_favorite_add( project.project_id )">
        Mark as favorite
    </ion-option-button>

    <ion-option-button ion-stop-event="click" class="button-small button-assertive" ng-if="current_project_list_type == 'favorites'" ng-click="project_favorite_remove( project.project_id )">
        Remove from favorites
    </ion-option-button>

Answer 2

In ionic2 3.4.0 use $event.stopPropagation(); in (click)

<ion-item (click)="firstView()">
        <ion-icon name="trash" item-end (click)="secondView();$event.stopPropagation();"></ion-icon>
        <h2>{{name}}</h2>
        <h3>{{type}}</h3>
        <p>{{description}}</p>

</ion-item>