I followed this post to implement a similar ajax loader image on a project:
My implementation has a few differences:
- I use
$rootScope
toemit
and notbroadcast
and I also use$rootScope
on the directive to handle the event. - Because of a particularity of the project, I have to unbind the directive
$rootScope.$on
listeners right after the first event being fired (either for show or hide), inside the event handler. - I only fire a single show/hide event. Show on the first HTTP request, hide when the count reaches 0.
I believe those are the major differences from the linked post, not sure if they are relevant to my question but just in case they are...
When the loader hide event is handled, the loader is gone and I won't show it again unless the page is refreshed, but I still have background http requests to refresh data on the current page. Those requests will still be intercepted and fire new show/hide events, which are no longer required/handled. I only need a first show and first hide, that's it.
What's the right way to remove the HTTP interceptor I added to the $httpProvider
after the the first hide event has been fired?
I know we add the interceptor using a $httpProvider.interceptors.push()
but I'm not sure how to pop it out when I no longer need that interceptor.