离子列表中的图标不可点击答案

【问题标题】：Icon in ionic list is not clickable离子列表中的图标不可点击
【发布时间】：2016-01-01 05:40:03
【问题描述】：

我的 ionic 项目中有一个列表，其中包含一些我想单击的图标。但是我无法通过 htmll onclick() 或 AngularJS ng-click 获取点击。我的 html 看起来像这样：

<ion-view view-title="CUES - WATCH LIST">
  <ion-content>
    <div class="notification-message col-80" ng-hide="hideNotificationMessage" ng-click="hideNotificationMessage=true" ng-bind-html="messageContents"></div>
    <ion-list>
      <ion-item ng-repeat="watchlistitem in watchlist" href="#/app/trailer/{{watchlistitem.id}}">
        <div class="watchlist-movie-thumb">
          <img class="movie-thumb-image" src="{{watchlistitem.picture}}">
        </div>
        <div class="col-75 watchlist-title-genre-container">
          <div class="watchlist-movie-title">
            {{watchlistitem.title}}
          </div>
          <div class="watchlist-movie-genres">
            {{watchlistitem.genres}}
          </div>
        </div>
        <a class="item-icon-right" onclick="alert('you clicked me');" ng-click='remove_movie()'>
          <i class="icon ion-trash-a" style="color:black;padding-top:40px"></i>
        </a>
        <a class="item-icon-right">
          <i class="icon ion-ios-upload-outline" style="color:black;padding-bottom:40px;"></i>
        </a>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

即使是 onclick() 也没有获得点击，这一事实很奇怪。我尝试将 z 索引更改为 9999，但这没有任何区别。

【问题讨论】：

当您尝试单击标签时，您的控制台中是否有任何消息？
我假设您可以在控制台中检查标记？
是的，我认为问题可能是由于点击受到离子 ion-item 或 ion-list 的限制

标签： javascript html angularjs ionic-framework

【解决方案1】：

通过尝试我能想到的每个 html 模块，我偶然发现了一个答案。

这有点麻烦，但不会影响布局。

我只是在标签中添加了一个margin-right样式，如下所示：

<a class="item-icon-right">
    <i class="icon ion-ios-upload-outline" style="margin-right:-2px;color:black;padding-bottom:40px;" ng-click='remove_movie()'></i>
</a>

对于解决点击问题，我给margin-right 赋予什么值似乎并不重要，只要它存在。它确实会按照您的预期改变布局。

【讨论】：