anaular js loadding效果

以前用的jquery的时候，用ajax实现，比较好弄，下面是angularjs的方式：

//body下面增加div
<div data-loading></div>

//directive实现
planControls.directive('loading',  ['$http' ,function ($http) {
    return {
        restrict: 'A',
        replace:true,
        template: '<div class="loading-holder" style="width: 100%;height: 100%;position: fixed;top: 0px; z-index: 1000000; background-color: black;opacity: 0.4;"  ><img style="position: fixed; top: 0px; left: 0px; right: 0px;bottom: 0px; margin: auto;" src="'
        +    DSJS.getWebRoot()+ '/resources/image/loadding.gif" /></div>',
        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();
                }
            });
        }
    };
}]);