javascript - 如果存在服务器数据，AngularJS仅显示 View

在我的常规Javascript中，如果服务器中有数据，则将数据追加到HTML 仅，否则，我仅显示一个简单的div表示什么都没有。如何在AngularJS中实现呢？

例:

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

如何在Angular中实现呢？

最佳答案

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

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

然后，在您的 Controller 中，您可以在加载数据时轻松地对此进行初始化:

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;
    });
});

如果要确保在实例化 View 之前已加载数据，则还可以在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的函数的哈希，可以像其他所有事物一样进行依赖项注入(inject)。在完成所有resolve promise 之前，不会加载 Controller 和 View 。

它将在您的 Controller 中以您为其指定的相同属性名称提供:

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