离子列表,在删除项目和 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
停止事件冒泡。
希望这对您有所帮助。
我有三种情况:
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
停止事件冒泡。
希望这对您有所帮助。