离子列表,在删除项目和 ui-sref 上使用动画会导致两者都在删除时触发

Ionic lists, using animation on remove item and ui-sref causes that both are triggered on a delete

我有三种情况:

1.- 如果我使用 item-remove-animate(它为删除操作设置动画)和 ui-sref(它使项目可点击以将用户发送到另一个视图),当我删除一个项目时,它会 deleted 而且 ui-sref 重定向被触发。

2.- 如果我删除动画 class 'item-remove-animate", 它会按我预期的那样工作,项目被删除,我仍然在同一个视图中。问题是项目被立即删除,我想保存动画。

3.- 如果我删除 ui-sref,动画会按预期工作,但我会丢失重定向。

这是我使用的完整视图,在第一种情况下:

HTML:

<ion-view title="Bimbo Keepers">
  <ion-nav-buttons side="left"><a ng-click="onShowDeleteIcons()" ng-if="reportes.length" class="button button-icon icon ion-minus-circled"></a></ion-nav-buttons>
  <ion-content padding="true" class="has-bottom-icons">
    <div class="row">
      <h1>Enviados</h1>
    </div>
    <ion-list show-delete="data.showDelete">
      <ion-item ng-repeat="reporte in reportes.slice().reverse()" type="item-text-wrap" ui-sref="tab.detail-enviados({id: reporte.id})" class="item-thumbnail-left item-icon-right item-remove-animate item item-complex item-left-editable item-right-editable">
        <ion-delete-button ng-click="onReporteDelete(reporte)" class="ion-minus-circled"></ion-delete-button>
        <img ng-src="{{ reporte.imagen1_base64 }}"/>
        <h2>Reporte No: {{reporte.id}}</h2>
        <p>Envíado el {{reporte.fecha}}</p><i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
    <div ng-if="!reportes.length" class="container">
      <p>No has enviado reportes. Desde la pantalla de Reportes Guardados, utiliza el botón sincronizar.</p>
    </div>
  </ion-content>
</ion-view>

这是一个CodePen: http://codepen.io/jdsampayo/pen/QbLggv

如能帮助保存动画,我们将不胜感激。

尝试使用 event.preventdefault() - 这可能会解决您的问题。不过如果能提供一个jsbinlink,调试问题就更好了。 在您拥有的 ondelete 函数中使用 event.preventDefault()。

onReporteDelete函数中使用$event对象并使用stopPropagation停止事件冒泡。

Updated codepen

希望这对您有所帮助。