Clicking Hastily Causes Routing Issue

Question

I have a simple Ionic v1 app that displays a list of items. Clicking on an item navigates the user to a new view displaying info about the item.

If the user selects a second before the first item is loaded, the app will navigate to both views respectively, which is an issue.

Is there a way to prevent this via an ionic config or angular?

Note I am using Ionic Native Transitions, but this issue seems to be independent

*Edit * I know I can use something like a 'loading' modal to prevent clicks, but then I'll have to do this for every single list in the application that loads data, so that doesn't sound ideal

Answer 1

I ended up utilizing inoicNativeTransition.beforeTransition in order to render a modal-style backdrop that prevents users from clicking for 300ms

  $rootScope.$on('ionicNativeTransitions.beforeTransition', function(){
    $rootScope.stateTransitioning = true;
    $timeout(function(){
      $rootScope.stateTransitioning = false;
    }, 300)
  });

HTML

  <div ng-show="stateTransitioning === true" id="inivisible-backdrop"> </div>

I don't hide the backdrop on the success of the transition, because there seems to be an inconsistent lag between when the view is changed and the transition is marked as 'successful'. 300ms seems to work just fine