将值加载到ng-if指令中的AngularJS计时

Question

I am using an few ng-if directives on elements while details about them are loading. This is so I can show a user a loader graphic while the element value is undefined. When the value gets defined the ng-if equates to false and hides itself.

Following that another ng-if equates to true which looks for the value being instantiated to some value.

<span ng-if="signboard.activeSlideshowId && signboard.activeSlideshowId!=0 && signboard.activeSlideshowId!='failed' && signboard.activeSlideshowName!='failed'"><a href="#/slideshows/{{ signboard.activeSlideshowId }}">{{ signboard.activeSlideshowName }}</a></span>
<span ng-if="signboard.activeSlideshowId==undefined"><i class="fa fa-spin fa-spinner"></i></span>
<span ng-if="signboard.activeSlideshowId=='failed' || signboard.activeSlideshowName=='failed'" class="text-warning">Failed</span>
<span ng-if="signboard.activeSlideshowId==0">No Active Slideshow</span>

The value in this ng-if takes some time to be populated leaving the space blank for a few noticeable moments. I can only take this to be that the ng-if adds these new elements to the dom and only on the following internal run of $scope.$apply() will these values be updated in the UI.

How can I make it that these transitions are smoother to the user, so that there isnt so much time inbetween the elements being displayed. I chose ng-if over ng-show because the page will contain a list of items and each column contains a value which needs to be individually populated from an asynchronous call. I am under the impression that too many ng-show/ng-hide calls on a page would really hamper performance.

Answer 1

您可以将ngHide与one time binding ：

<span ng-hide="::signboard.activeSlideshowId"><i class="fa fa-spin fa-spinner"></i></span>