$ionicLoading but with some way to detect taps

1

Hi, is there a construct in ionic that displays a loading message, just like $ionicLoading but also allows me to detect taps outside the message so I can cancel that loading message?

I basically have a situation where a function gets called, say, 100 times in quick succession (the function does an http.get) and each time it gets called, it displays a “Loading…”

I am currently using $ionicLoading for this and hiding after http success, but I’d like a means to be able to cancel this loop.

In the template, I have

 <ion-content on-tap="tapped();">

but when ionicLoading shows, on-taps are disabled.

2

There are two methods that come to mind immediately for me.

  1. You can just use a modal that you customize the CSS on to mimic the look of the loading, or change it to how you want and this will give you full gesture control.

  2. You can edit the $ionicLoading provider source to allow something like this.

Found this that might also guide you in the right direction.

Good luck!

3 Likes
3

NorthMcCormick, thank you - that works perfectly. However, I want the “X” icon bigger - increasing font size for the ion-cross messes up alignment with the text next to it. I also tried putting in the ion-cross inside the button - while that fixes the size of the X, the alignment problem with the text next to it is frustrating me. Do you know how to fix it?

my code:

 var toastStr="Searching page "+eventsPage+" for '"+$scope.search.text+"'...";
           
            

$ionicLoading.show({ scope:$scope, template: '<button class="button button-clear icon-left ion-close-circled" style="line-height: normal; min-height: 0; min-width: 0;" ng-click="cancelSearch()" ></button>'+toastStr});

The style="" makes no difference where it is specified or not

Here is what it looks like: note the complete misalignment

image

1 Like
4

Great question… let me take a look and see if I can get something to work

5 
$ionicLoading.show({ scope: $scope, template: '<button class="button button-clear"  ng-click="cancelSearch()" style="color: #FFFFFF;"><i class="icon ion-close-circled" style="vertical-align: middle;"></i><span style="vertical-align: middle;">&nbsp;&nbsp;' + toastStr + '</span></button>'});

Here is what I was able to get working. I was just testing this in my app which does have some global custom styles but I hope it can get you in the right direction. I would test for platform compatibility too. The entire block is a button at this point which is nice so the user doesn’t have to fumble to hit the X if they’re doing something, they can just click the text/button and it will stop the loading.

Edit: to make this cleaner you could totally wrap these in a CSS class too once you have the look right. Just might help if you need to replicate this in other parts of your code.

6

Hi @NorthMcCormick, actually putting it all inside the button was something I tried yesterday. While it solves the alignment problem, it truncates the text and does not word wrap even if I stuff the ‘wrap’ class inside the button. This becomes painful in phones, I get a ‘Searching page 43 for’ and the rest gets cut off mercilessly. so I can go the ‘all in button’ route, if I figure out how to text wrap

Thank you!

7

Oooh okay. That would be a problem, I can try some more things when I get back home tonight.