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

ionic-v1
1

I have three cases:

1.- If I use item-remove-animate (it animates the delete action) and ui-sref (it makes the item clickable to send the user to another view), when I delete an item, it gets deleted but also, the ui-sref redirect is triggered.

2.- If I remove the animation class 'item-remove-animate", it works as I expect, the item is deleted and I’m still on the same view. The problem is that the items are deleted instantly, I would like to conserve the animation.

3.- If I remove the ui-sref, the animation works as expected but I lose the redirect.

Here it is the complete view I’m using, in the first case:

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>

CONTROLLER:

angular.module('mysteryshoppers.controllers').controller('ReportesEnviadosController', function($scope, ReportesEnviados) {
  $scope.data = {
    showDelete: false
  };
  $scope.$on('$ionicView.beforeEnter', function() {
    return $scope.reportes = ReportesEnviados.all();
  });
  $scope.onShowDeleteIcons = function() {
    return $scope.data.showDelete = !$scope.data.showDelete;
  };
  $scope.onReporteDelete = function(reporte) {
    ReportesEnviados.delete(reporte.id);
    $scope.reportes.splice($scope.reportes.indexOf(reporte), 1);
  };
  $scope.onDestruir = function() {
    ReportesEnviados.destroy();
    $scope.reportes = [];
  };
});

MODEL:

angular.module('App')

.factory('ReportesEnviados', ($filter) ->
  reportes = angular.fromJson(localStorage.getItem('reportes-enviados')) or []
  {
    count: ->
      reportes.length
    all: ->
      reportes
    get: (reporteId) ->
      ...get an item...
      null
    save: (reporte) ->
      ...save an item...
      null
    delete: (reporteId) ->
      ...delete an item...
      null
    destroy: ->
      ...delete all...
      null
  }
)

Any help will be appreciated to conserve the animation.

2

Could you provide a codepen example of this?

3

Of course, here it is:

Try to delete an item, you can activate the delete icons with the top left button.

4

Here it is a workaround:

Prevent the propagation of the $event on delete.

5

Hmm, alright, seeing this too. It seems that if you use ng-href instead, it appears to work though. Would you mind opening an issue for this and pinging me on it? I’m @mhartington on github too.