tamakisquare tamakisquare - 4 months ago 6x
AngularJS Question

How can I defer view rendering until some data is loaded from an external source?

My app needs to load some data into the

from an external source when it initializes. Since the data is from an external source, the time required to load the data is not guaranteed. I want to defer the rendering of the view until only after the data is loaded successfully. Is there a way to achieve this?

Note that I am not using the Angular routing for this app.

Here is a simplified demo


There isn't a clean way to prevent the view from rendering until an async operation completes without using route resolves, but you could program a custom directive to do the same work.

However, if this is strictly for user experience, then using ngShow would work swimmingly:

<div ng-show="user.name">
  <!-- content won't be visible until data is set -->

Here's an updated Plunker: http://plnkr.co/edit/MXoQNWHvyp9aOXg0QOoC?p=preview