AngularJS-內容加載時如何顯示消息“ Loading…”？

Question

我在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）嗎？

先感謝您。

Answer 1

關於什么

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

Answer 2

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

這個東西非常好，有了這個，您不需要包裝每個請求

只需鏈接到index.html並在app.js中包括Dependecy，就可以了