在 AngularJS 中服务器处理时禁用按钮

Question

在服务器上处理“长”请求时，我在禁用按钮时遇到问题。

我们的应用程序运行在 Java Spring/Tomcat 后端，前端使用 AngularJS。我们的用户可以点击“导出”按钮来获取一些统计数据的 CSV 文件。问题是这个文件是通过调用这样的 URL 在服务器端生成的：

<a ng-href="/exports?id={{the_id}}>Export</a>

并且响应类型是：application/octet-stream。

请求工作正常，但可能有点慢。我想在文件生成时禁用该按钮，并在“保存文件”窗口出现后启用它。但是我无法通过简单的“同步”href 拦截这些事件。

我尝试异步处理请求，$http.get()但这一次，我不知道如何在处理完成后以相同的方式向用户提供文件（例如，Mega 为已经使用过它的人提供的方式）。

提前致谢 ！

PS：我知道，使处理速度更快是另一种解决方案......但现在不可能，而不是重点:)

编辑：问题得到了解决，感谢 Ed 的回答，并进行了一些修改（我不知道这样做是否是“好”的方法，但实际上它完全按照我想要的方式对我有用）。

$scope.processExport = function(campaignId) {
    if (!$scope.exportProcessing) {
        $scope.exportProcessing = true;
        $http.get('my_generating_url').success(function(response) {
            $scope.exportProcessing = false;
            $window.location.href = 'url_to_retrieve_the_file_with_' + response.fileName;
        }).error(function() {
            $scope.exportProcessing = false;
        });
    }
}

以及相应的 HTML：

<button ng-click="processExport(the_id)" ng-disabled="exportProcessing">Export</button>

并且my_generating_url只是在成功生成后返回文件名。

Answer 1

你想做的事情是相当困难的。

一种方法是修改服务器的工作方式：不是接受请求，然后在生成文件时回复文件本身，流程可能如下：

1. 收到GET /exports?:id
2. 在本地（服务器上）生成文件，地址如下public/tmp/somefile
3. 文件生成后，使用文件路径回复请求 ( www.server.com/tmp/somefile)

然后，在客户端你可以做这样的事情：

function getExportedFile(id){

  $scope.exporting = true;

  $http.get('/exports?id=' + id)
  .then( function (response) {
    $scope.exporting = false;
    $location.path(response.data);
  })
  .catch( function (error) {
    // TODO: handle errors
  });

}

哪个适用于：

<button ng-click    = "getExportedFile(fileId)"
        ng-disabled = "exporting">
  Download Exported File
</button>