Question

在我的常规Javascript中，如果有来自服务器的数据，我会将数据附加到HTML ONLY ，否则我只会显示一个简单的div说什么都没有。我如何在AngularJS中实现它？

示例：

if (AJAXresult) 
    $element.append(JSONdata); //JSONdata will contain a list of customer data
else
    $element.append('<div>No results</div>');

我如何在Angular中实现这一目标？

Answer 1

最简单的方法是控制返回视图中的无数据状态。

<div>
   <div ng-if="!hasCustomers">
     No Customers Available
   </div>
   <div ng-if="hasCustomers">
     <!-- show some stuff -->
   </div>
</div>

然后在您的控制器中，您可以在加载数据时轻松初始化它：

angular.module('myApp').controller('MyController', function($scope, myDataService){
    $scope.hasCustomers = false;

    myDataService.getCustomers()
    .then(function(value){
        $scope.customers = value.data;

        $scope.hasCustomers = customers && customers.length;        
    });
});

如果您想在实例化视图之前确保已加载数据，那么您还可以使用resolve

上的$route属性

$routeProvider.when('/someRoute/',{
   templateUrl: '/sometemplate.html',
   controller: 'MyController',
   controllerAs: 'ctrl', // <-- Highly recommend you do this
   resolve: {
      customerData: function(myDataService){
          return myDataService.getCustomers();
      }
   }
});

resolve基本上是返回promise的函数的哈希，并且可以像其他所有内容一样注入依赖项。在完成所有resolve承诺之前，不会加载控制器和视图。

它将在您的控制器中以您提供的相同属性名称提供：

angular.module('myApp')
.controller('MyController', function($scope, customerData){
   $scope.customers = customerData;
   $scope.hasCustomers = customerData && customerData.length;
});

AngularJS仅显示视图，如果服务器数据存在

1 个答案: