Question

无论如何在从api服务加载数据时显示骨架（空盒子 - 如果我需要使用服务从后台加载一些图像和文本），以便用户感觉到某些事情正在发生而不是显示空页面和转储数据一旦准备就绪。

Answer 1

您可以使用简单的ng-show和加载的变量。

即

<div ng-show="Controller.loaded"></div>

$scope.loaded = false;
$http.get(...)
    .then(...{
        $scope.loaded = true;
    })

Answer 2

您需要ngCloak

有一个plunker然而它太快而无法被注意到：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-cloak-production</title>    
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
  <div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2">{{ 'world' }}</div>
</body>
</html>

在您的项目上试一试，看看是否有帮助

Angularjs-在加载数据时显示骨架

2 个答案: