Question

我有以下代码段，它调用REST服务来下载CSV。

var link = document.createElement('a');
link.setAttribute('href',rest_URL);
document.body.appendChild(link);
link.click();

现在我打算在链接点击时显示加载栏，直到CSV下载到浏览器。怎么做??

我尝试使用 $ http ，但我不想将内容显示为对象，然后转换为CSV。

是否有任何 Angular 功能可用于监控链接点击，并在链接操作完成后触发事件？

我已经加载了条形码，只需要在上面的锚标记返回响应之后获取操作完成事件的帮助，而不是通过 $ http 。

一些角色专业知识会非常有用。

Answer 1

我正在使用Angular Loading Bar。它自动为$ http。

工作

Answer 2

有几种方法可以达到你想要的效果。开箱即用，以下是其中一些：

我个人使用最后一个，但要注意，如果您打算使用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>

此外，您还有加载屏幕！

https://material.angularjs.org/latest/demo/progressCircular

Answer 3

我认为您可以在a标签上使用 ng-click 来调用控制器上的一个函数来调用标注，在标注之前设置一个标志，然后在回调中更改其状态。

$scope.doCallout = function() {
   $scope.calloutInProggress = true;
   sendCallout(url, function(response) {
     // do whatever
     $scope.calloutInProggress = false;
     $scope.$apply();
   } 
}

SendCallout是一个虚拟函数，使用你想要的任何东西。

Angular JS：从REST服务

3 个答案: