javascript - AngularJS ng-if has a strange delay - Stack Overflow

admin管理员组

文章数量:1431406

On the image, you can see that there are loading spinners next to the numbers.

The DOM element that shows the spinner has ng-if = "gridItem.contentScoreLoadingState == 'loading'".

The DOM element that shows the number has ng-if = "gridItem.contentScoreLoadingState == 'loaded'".

Code is below:

<i class="fa fa-spin fa-spinner" style="font-size: 12px;" ng-if="gridItem.contentScoreLoadingState=='loading'"></i>
<span ng-if="gridItem.contentScoreLoadingState=='failed'">-</span>
<span ng-if="gridItem.contentScoreLoadingState=='loaded'">{{ gridItem.content_score }}</span>

When loading ends, first the number shows and after a small delay loading spinner disappears. But for an instant both of them appears at the same time and I'm not sure why.

On the image, you can see that there are loading spinners next to the numbers.

The DOM element that shows the spinner has ng-if = "gridItem.contentScoreLoadingState == 'loading'".

The DOM element that shows the number has ng-if = "gridItem.contentScoreLoadingState == 'loaded'".

Code is below:

<i class="fa fa-spin fa-spinner" style="font-size: 12px;" ng-if="gridItem.contentScoreLoadingState=='loading'"></i>
<span ng-if="gridItem.contentScoreLoadingState=='failed'">-</span>
<span ng-if="gridItem.contentScoreLoadingState=='loaded'">{{ gridItem.content_score }}</span>

When loading ends, first the number shows and after a small delay loading spinner disappears. But for an instant both of them appears at the same time and I'm not sure why.

• javascript
• angularjs
• scope

Share Improve this question Follow edited Jun 27, 2016 at 17:27 Hopeful Llama 75655 silver badges2626 bronze badges asked Jun 27, 2016 at 15:13 OguzGelalOguzGelal 77677 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

I tried to wrap <i.. inside of a wrapper element and moved to ng-if to there. And it worked. Like this:

<span ng-if="gridItem.contentScoreLoadingState==='loading'"><i class="fa fa-spin fa-spinner" style="font-size: 12px;"></i></span>
<span ng-if="gridItem.contentScoreLoadingState==='failed'">-</span>
<span ng-if="gridItem.contentScoreLoadingState==='loaded'">{{ gridItem.bined_frequency }}</span> 

One potential cause could be ngAnimate if you're using that module (grasping at straws, but that's caused me issues in the past).

Regardless, in your situation it probably makes more sense to use a switch:

<span ng-switch="gridItem.contentScoreLoadingState">
  <span ng-switch-when="loading"><i class="fa fa-spin fa-spinner" style="font-size: 12px;"></i></span>
  <span ng-switch-when="failed">-</span>
  <span ng-switch-when="loaded">{{ gridItem.content_score }}</span>
</span>

本文标签： javascriptAngularJS ngif has a strange delayStack Overflow