AngularJS timing on loading values into ng-if directive

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.

angular-ng-if-loading

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.

Can you possibly provide a plunkr or something similar to showcase your problem? I have a hard time figuring out your exact problem. — Jonathan
– Jonathan, Commented Mar 18, 2015 at 7:12
Ngshow is actually faster than ngif, because ngif adds elements to the Dom and compiles the inserted Dom. But using ngshow means more watchers... — jlowcs
– jlowcs, Commented Mar 18, 2015 at 7:14

dting · Accepted Answer · 2015-03-18 07:27:07Z

2

You can use ngHide with a one time binding:

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

answered Mar 18, 2015 at 7:27

dting

39.4k10 gold badges98 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tensai Over a year ago

The problem with using ngHide and ngShow, is that my ngShow directives show long before the ngHide directives are run. Even if the ngHide directives are situated above the ngShow.

Collectives™ on Stack Overflow

AngularJS timing on loading values into ng-if directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related