如何在angularjs中使用指令显示特定元素上的微调器？

Question

我的应用程序中有一个使用ng-repeat生成的网格。每当发出http调用时，我写了一条指令来显示Spinner。当进行http调用时，微调器将显示在每个网格上，而不是特定的网格上。我只想在用户单击的网格上显示微调框。

app.directive('Loading', function ($compile , $http) {
var loadingSpinner = '<i class="fa fa-spinner fa-spin"></i>';
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var originalContent = element.html();
        element.html(loadingSpinner);
        scope.isLoading = function () {
          return $http.pendingRequests.length > 0;
        };
        scope.$watch(scope.isLoading, function (val) {              
            if(!val) {
                element.html(originalContent);
                $compile(element.contents())(scope);
            } else {
                element.html(loadingSpinner);
            }
        });
    }
};

My grids look something like this