AngularJS - 如何在加载内容时显示消息“正在加载...”？答案

【问题标题】：AngularJS - How to display message "Loading..." while the content is being loaded?AngularJS - 如何在加载内容时显示消息“正在加载...”？
【发布时间】：2015-10-27 15:19:38
【问题描述】：

我在 SO 上找到了关于这个主题的主题，但看起来我加载数据的方式不是最好的。

这是控制器的样子：

app.controller("PostsCtrl", ['$scope', '$http', '$resource', 'Posts', 'Post', '$location', '$modal', '$timeout', function($scope, $http, $resource, Posts, Post, $location, $modal, $timeout) { 

    $scope.posts = Posts.query();

    ... some add/edit/delete code

页面加载时，不会立即显示来自 DB 的数据。如何在那里显示loading... 消息？

我尝试在视图中使用<div ng-if="loading">loading...</div> 和

$scope.loading = true;
$scope.posts = Posts.query();
$scope.loading = false;

在 AngularJS 控制器中，但这似乎不起作用。我还注意到每次调用控制器时都会执行$scope.posts = Posts.query();。

这是解决这个问题的好方法（或 AngularJS）吗？

提前谢谢你。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

怎么样

$scope.loading = true;
$scope.posts = Posts.query(function ()  {
    $scope.loading = false;
});

【讨论】：

【解决方案2】：

https://github.com/chieffancypants/angular-loading-bar

这个东西很不错，有了这个你就不需要包装每个请求了

只需在 index.html 中链接并在 app.js 中包含依赖项即可

【讨论】：