Can ng-show directive be used with a delay

Question

I have a spinner this is shown with ng-show="loading>0"

Is there a way I can display this spinner with a delay (say 1 second)?

I can't use a timeout because with multiple requests de loading counter will get out of sync.

What I need is a delay on the ng-show via css transition or similar

Answer 1

I think a pure CSS solution is the best way to do it.

Here is a plunker showing how to do it. Using ng-animate classes for transition and applying a transition delay with a transition of 10ms (0s transition is not working with css).

Relevant part of the code :

.your-element-class.ng-hide {
  opacity: 0;
}

.your-element-class.ng-hide-add,
.your-element-class.ng-hide-remove {
  transition: all linear 0.01s 1s;
}

The only reason to use a custom directive for it would be using this tons of times in your code with different delays value. A custom directive allow more flexibility with the delay timing.