在 div 中加载数据时，在 div 上显示加载图像（沙漏）答案

【问题标题】：showing loading image (hour glass) over a div when data is loading in div在 div 中加载数据时，在 div 上显示加载图像（沙漏）
【发布时间】：2014-08-06 14:09:14
【问题描述】：

我正在开发 AngularJS 应用程序。在应用程序中，DIV 之一正在显示网格数据。我想要的是，当网格加载数据时，系统应该在 div 顶部显示加载图像，当数据加载时，它应该删除该图像。

如果我按照经典的方式，当触发数据加载事件时，我们可以手动在 div 顶部显示图像，当数据完全加载时，我们可以手动隐藏加载图像。

我们能否自动化这个过程，让 AngularJS 或任何其他库来决定何时显示和何时隐藏加载图像。就像，只要 DIV 的内部 HTML 被修改，它就应该显示加载图像。

【问题讨论】：

您的网格数据是如何获取数据的？来自 http 请求？

标签： javascript jquery angularjs

【解决方案1】：

是的，您可以自动化这个过程并使用数据绑定将其留给 AngularJS。

<i class=loading-icon ng-if=!ctrl.data.length></i>


app.controller("ctrl", function ($http) {
    var ctrl = this;
    ctrl.data = [];

    $http.get(url).success(function (data) {
        ctrl.data = data;
    });
});

【讨论】：

【解决方案2】：

在 HTML 中将 data-ng-if="isLoading" 添加到加载 div，然后在 js 中加载数据集 scope.isLoading 为 true，然后在发出请求和加载完成时将其设置为 false。

【讨论】：