angular.module('directive.loading',[])

    .directive('loading',['$http',function ($http)
    {
        return {
            restrict: 'A',link: function (scope,elm,attrs)
            {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                };

                scope.$watch(scope.isLoading,function (v)
                {
                    if(v){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

使用这个指令，你需要做的是给任何加载动画元素一个’loading’属性：

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>

您可以在页面上多个加载纺纱工具。在哪里和如何布局这些纺纱机是由你和指令将自动打开/关闭它。