这是我的解决方案，我觉得比其他贴在这里的要容易得多。虽然不知道它有多“漂亮”，但它解决了我所有的问题

我有一个css样式叫做loading

.loading { display: none; }

加载div的html可以是任何东西，但我使用了一些FontAwesome图标和旋转方法:

<div style="text-align:center" ng-class="{ 'loading': !loading }">
    <br />
    <h1><i class="fa fa-refresh fa-spin"></i> Loading data</h1>
</div>

在你想要隐藏的元素上，你只需这样写:

<something ng-class="{ 'loading': loading }" class="loading"></something>

在函数中，我把这个设为load。

(function (angular) {
    function MainController($scope) {
        $scope.loading = true

我使用的是SignalR，所以在hubProxy.client.allLocks函数(当它完成了通过锁)，我只是把

 $scope.loading = false
 $scope.$apply();

当页面加载时，这也隐藏了{{someField}}，因为我在load上设置了加载类，AngularJS随后删除了它。

加上@Adam的回答，

按照建议使用ng-show，但是，在您的情况下，您希望该功能具有多个请求，并在加载器被隐藏之前等待所有请求。

<span ng-show="pendingRequests > 0">
    <img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" style="height:20px;"/>
</span>

然后在控制器中:

$scope.pendingRequests++;

let url = '/whatever_Your_URL_Is'
$http.get(url)
  .then(function(response) {
      $scope.pendingRequests--;
})

由于position:fixed的功能最近发生了变化，我很难将gif加载器显示在所有元素之上，所以我不得不使用angular内置的jQuery。

Html

<div ng-controller="FetchController">
      <div id="spinner"></div>
</div>

Css

#spinner {display: none}
body.spinnerOn #spinner { /* body tag not necessary actually */
   display: block;
   height: 100%;
   width: 100%;
   background: rgba(207, 13, 48, 0.72) url(img/loader.gif) center center no-repeat;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
}
body.spinnerOn main.content { position: static;} /* and whatever content needs to be moved below your fixed loader div */

控制器

app.controller('FetchController', ['$scope', '$http', '$templateCache', '$location', '$q',
function($scope, $http, $templateCache, $location, $q) {

angular.element('body').addClass('spinnerOn'); // add Class to body to show spinner

$http.post( // or .get(
    // your data here
})
.then(function (response) {
    console.info('success');     
    angular.element('body').removeClass('spinnerOn'); // hide spinner

    return response.data;               
}, function (response) {                   
    console.info('error'); 
    angular.element('body').removeClass('spinnerOn'); // hide spinner
});

})

希望这对你有所帮助。

如果你正在使用ngResource，对象的$resolved属性对加载器很有用:

对于资源，如下所示:

var User = $resource('/user/:id', {id:'@id'});
var user = User.get({id: 1})

你可以将加载器链接到资源对象的$resolved属性:

<div ng-hide="user.$resolved">Loading ...</div>

简单的方法没有拦截器或jQuery

这是一种显示旋转器的简单方法，不需要第三方库、拦截器或jQuery。

在控制器中设置和重置标志位。

function starting() {
    //ADD SPINNER
    vm.starting = true;
    $http.get(url)
      .then(function onSuccess(response) {
        vm.data = response.data;
    }).catch(function onReject(errorResponse) {
        console.log(errorResponse.status);
    }).finally(function() {
        //REMOVE SPINNER
        vm.starting = false;
    });
};

在HTML中，使用标记:

<div ng-show="vm.starting">
    <img ng-src="spinnerURL" />
</div>

<div ng-hide="vm.starting">
    <p>{{vm.data}}</p>
</div>

vm。当XHR开始时设置为true，当XHR完成时清除。

显示不同url更改之间加载的另一个解决方案是:

$rootScope.$on('$locationChangeStart', function() {
  $scope.loading++;
});

$rootScope.$on('$locationChangeSuccess', function() {
  $timeout(function() {
    $scope.loading--;
  }, 300);
});

然后在标记中用ng-show="loading"切换旋转器。

如果你想在ajax请求中显示它，只需添加$scope。当请求开始和结束时加载++，添加$scope.loading——。