我有下面的代码 sn-p，它调用 REST 服务来下载 CSV。
var link = document.createElement('a');
link.setAttribute('href',rest_URL);
document.body.appendChild(link);
link.click();
现在我计划在点击链接时显示加载栏，直到 CSV 下载到浏览器。怎么办？？
我尝试使用 $http，但我不想将内容显示为对象，然后转换为 CSV。
是否有任何 Angular 功能可用于监控链接点击，并在链接操作完成时触发事件？
我已经加载了条形码，只需要在从上面的锚标记返回响应后获取动作完成事件的帮助，而不是通过$http。
一些 Angular 专业知识会很有帮助。
【问题讨论】：
标签： javascript angularjs rest csv
我正在使用Angular Loading Bar。它会自动为 $http 工作。
【讨论】：
我认为您可以在 a 标记上使用 ng-click 来调用控制器上的函数来进行标注，在标注之前设置一个标志，然后在回调中更改其状态。
$scope.doCallout = function() {
$scope.calloutInProggress = true;
sendCallout(url, function(response) {
// do whatever
$scope.calloutInProggress = false;
$scope.$apply();
}
}
SendCallout 是一个虚拟函数，你可以随意使用。
【讨论】：
有多种选择可以实现您想要的。开箱即用，以下是其中的一些：
我个人使用最后一个，但请注意，如果您要使用 Angular Material，我建议您使用稳定版本而不是候选发布版本：D
这里有一些代码可以帮助你！
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.config(function($mdThemingProvider) {})
.controller('AppCtrl', ['$scope', '$interval',
function($scope, $interval) {
var self = this,
j = 0,
counter = 0;
self.mode = 'query';
self.activated = true;
self.determinateValue = 30;
self.determinateValue2 = 30;
self.showList = [];
/**
* Turn off or on the 5 themed loaders
*/
self.toggleActivation = function() {
if (!self.activated) self.showList = [];
if (self.activated) {
j = counter = 0;
self.determinateValue = 30;
self.determinateValue2 = 30;
}
};
$interval(function() {
self.determinateValue += 1;
self.determinateValue2 += 1.5;
if (self.determinateValue > 100) self.determinateValue = 30;
if (self.determinateValue2 > 100) self.determinateValue2 = 30;
// Incrementally start animation the five (5) Indeterminate,
// themed progress circular bars
if ((j < 2) && !self.showList[j] && self.activated) {
self.showList[j] = true;
}
if (counter++ % 4 == 0) j++;
// Show the indicator in the "Used within Containers" after 200ms delay
if (j == 2) self.contained = "indeterminate";
}, 100, 0, true);
$interval(function() {
self.mode = (self.mode == 'query' ? 'determinate' : 'query');
}, 7200, 0, true);
}
]);
/**
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
**/<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Material Buffer Bar</title>
<!-- CSS -->
<link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet" />
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" />
</head>
<body>
<!-- Buffer Bar, there are other types of bars you can pick, I chose this one!-->
<div ng-controller="AppCtrl as vm" layout="column" layout-margin="" style="padding:25px;" ng-cloak="" class="progressLineardemoBasicUsage" ng-app="MyApp">
<h4 class="md-title">Buffer</h4>
<p>
For operations where the user wants to indicate some activity or loading from the server, use the <b>buffer</b> indicator:
</p>
<md-progress-linear class="md-warn" md-mode="buffer" value="{{vm.determinateValue}}" md-buffer-value="{{vm.determinateValue2}}" ng-disabled="!vm.showList[0]"></md-progress-linear>
</div>
<!-- JavaScrip -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
</body>
</html>此外，您还有加载屏幕！
【讨论】：