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

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