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请求变得很慢，0个应用程序的div块会显示一两秒钟。然后，一旦结果加载，它将更改为另一个块。我希望它能够加载应用程序，然后显示正确的视图。

Answer 1

如果在第一次AppService.fetch（）之前没有定义$ scope.apps怎么办？

Answer 2

您可以将变量用作标志，并在promise中将其设置为true。这样你只需要在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>

修改： -

在我看来，你不应该有两个div而是基于你应该只在promise部分添加自定义消息的响应，promise部分应该用于赋值目的。此外，如果有countApp() === 0个案例的其他div，那么逻辑也应该在promise部分。避免为代码的不同响应值创建div。

Answer 3

您可以在promise回调中定义countApps（）方法

请参阅here

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

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

在显示正确的html块之前等待http结果

3 个答案: