javascript - AngularJS 仅在服务器数据存在时显示 View

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

最简单的方法是控制返回 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 之前加载数据，那么您还可以在 $route 上使用 resolve 属性

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