Clicking an element/link inside of ion-item? (ie. [[left-side-click][right-side-click]])


#1

I’m creating a particular list item that has 2 click abilities; but the ion-item prevents me from doing so.

What I have currently is a list that goes to a detail page. This works fine in it’s current state if only needing one click action.

<ion-list class="list">
      <ion-item data-ng-repeat="place in places" href="#/place/{{place.ID}}">
          <div class="left-side">Left</div>
          <div class="right-side">Right</div>
    </ion-item>
</ion-list>

However if I change it to

<ion-list class="list">
      <ion-item data-ng-repeat="place in places">
          <div class="left-side" onclick="alert('hello');">Left</div>
          <div class="right-side" onclick="alert('goodbye');">Right</div>
    </ion-item>
</ion-list>

Neither is accessible for clicking.

Is there a recommended way to do this? remove the ion-item for my item list? override the hidden click that’s on ion-item somehow? Should i just dismiss anything ion-tag and pretend they don’t exist? I’m trying to adhere to the ionic-way as best as possible


#2

The ion-list controller is really for a specific type of interaction - It adds lots of functionality for adding, reordering, etc.

If you don’t need all that functionality, you can just use simple lists.

Here’s a sample that does the left/right clicks you wanted : http://codepen.io/calendee/pen/awJvu

However, it does NOT allow deleting, re-ordering, etc.


#3

I just ran into the same problem. I have an info icon in an ion-item element directive. I need the delete buttons provided. Hmm…


#4

I agree @guys and @SudoStack that this should be added to the backlog. In my case, it’s the need to tap/click on tags on an ion-item in order to filter the ion-list.

I couldn’t solve it with z-index on the tags, but I did create a mediocre workaround by moving the ng-click from ion-item down onto the main component. For example:

<h2 ng-click="goDetail(item)" style="cursor: pointer">{{item.name}}</h2>

And placed the links on the tags. For example:

<span class="app-tag-group">
    <a ng-repeat="tag in item.tags" class="app-tag" ng-click="filterTag(tag)">{{tag.name}}</a>
</span>

But that still leaves more than half the height of ion-item untappable because of padding, which makes it mediocre at best