Question

我有一个链接，可以在点击时将一些文件下载到用户的计算机上。除此链接外，我还有一个下载图标。我想在下载文件时将下载图标替换为旋转轮图标，然后在下载完成后恢复为原始图标。这是代码：

span.fa.fa-icon-only.fa-fw.fa-download.bigger-120.black
a(href='#', ng-click='download_batch($event, \'original\');')

在下载过程中是否有一种简单的方法可以更改跨度上的类？

Answer 1

您的麻烦将是通过尝试监控下载完成时间。没有javascript api。这是服务器和客户端之间的一个黑客攻击，使得使用cookie工作：

Detect when browser receives file download

所以我会做这样的事情：

<a ng-repeat="file in files" 
   ng-href="file.url" 
   ng-click="startDownload(file.token)"
   ng-class="{'spinner-icon': activeChecks[file.token], 'normal-icon': !activeChecks[file.token] }">
     {{file.name}}
</a>

控制器：

app.controller("MyController", [ '$scope', '$interval', '$cookies', 'SomeService', function($scope, $interval, $cookies, SomeService) {
   $scope.activeChecks = {};
   $scope.files = [];

   $scope.loadFiles = function() {
       SomeService.getDownloads().success( function(result) {
          $scope.files = result.files;
          // each file would follow something like:
          // { url: 'http://someblah/path/to/file?token=$token', token: $token, name: 'Some Name' }
       });
   }

   $scope.startDownload = function( token ) {
      $scope.activeChecks[token] = $interval(lookForToken(token), 5000);
   };

   $scope.lookForToken = function( token ) {
      return function() {
         var found = $cookies[token];
         if( found ) {
            $interval.cancel($scope.activeChecks[token]);
            $scope.activeChecks[token] = null;
         }
      }
   };
}]);

在下载文件时动态添加类

1 个答案: