Как можно отложить рендеринг отображения до тех пор, пока некоторые данные не будут загружены из внешнего источника?

Мое приложение должно загружать некоторые данные в $rootScope из внешнего источника при его инициализации. Поскольку данные получены из внешнего источника, время, необходимое для загрузки данных, не гарантируется. Я хочу отложить рендеринг представления до тех пор, пока данные не будут успешно загружены. Есть ли способ достичь этого?

Обратите внимание, что я не использую маршрутизацию Angular для этого приложения.

Вот упрощенная демонстрация

Ответ 1

Нет никакого чистого способа предотвратить рендеринг представления до тех пор, пока операция async не завершится без использования разрешений маршрута, но вы можете запрограммировать настраиваемую директиву для выполнения той же работы.

Однако, если это строго для пользователя, то использование ngShow будет работать плавно:

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

Здесь обновленный Plunker: http://plnkr.co/edit/MXoQNWHvyp9aOXg0QOoC?p=preview

Ответ 2

Для меня это была не просто проблема с флагом UI. Поскольку данные не были загружены до рендеринга, мой выбор bootstrap не выбирал соответствующее значение данных. Я смог решить проблему, разместив в контейнере "ng-if", в результате чего выпадающий выберите, как показано ниже:

<div class='bootstrap-select-dropdown-wrapper' ng-if='listofthings.length > 0'>...</div>

Надеюсь, это поможет кому-то, кто сталкивался с подобной проблемой (примечание: я также включил модуль nya-bootstrap-select в свой проект - bower install nya-bootstrap-select)