Ожидание результатов HTTP, прежде чем показывать правильный блок HTML

Question

В Angularjs зрения у меня есть два div блока:

<div ng-if="countApps() == 0"> 

</div> 

и

<div ng-if="countApps() > 0"> 

<div> 

Мой контроллер обеспечивает функцию возврата числа приложений:

$scope.countApps = function(){ 
    return $scope.apps.length; 
} 

и для получения информации:

//controller 
AppService.fetch().$promise.then(function(response){ 
    $scope.apps = response.apps; 
}) 

Проблема в том, что если HTTP-запрос случается медленным, блок div для 0 приложений отображается на секунду или два. Затем он будет изменен на другой блок после загрузки результатов. Я бы хотел, чтобы он загружал приложения, а затем показывал правильный вид.

Answer 1

Что делать, если не определить $ scope.apps перед первым AppService.fetch()?

Answer 2

Вы можете использовать переменную как флаг и установить ее в соответствии с обещанием. Таким образом вам нужно только создать на div, а не использовать другой div для нулевого случая.

AppService.fetch().$promise.then(function(response){ 
    $scope.apps = response.apps; 
    $scope.app_present = true; 
}) 

<div ng-if="countApps() && app_present"> 
    This will only be shown when you get response. 
<div> 

EDIT: -

По-моему, вы не должны иметь два DIV скорее на основе ответ, вы должны добавить пользовательское сообщение только обещание части, обещает часть должна быть использована для целей назначения. Также, если есть другие divs для countApp() === 0 case, тогда логика для этого также должна быть в обещанной части. Избегайте создания div для разных значений ответа, которые не выглядят хорошо в коде.

Answer 3

Вы можете определить свои countApps() метод в обещании обратного вызова

here См

//dummy example from plunker 
    AppService().then(function(result) { 
    $scope.apps = result; 

    $scope.countApps = function() { 
     return $scope.apps; 
    } 
    });