如何使用角材料圆形进度条

Question

我正在尝试在上传视频时使用进度条，但进度条会显示在加载页面上并且会永久显示。

<div ng-show="!$ctrl.setNewVideoRecord()">
    <md-progress-circular md-mode="indeterminate" md-diameter="100">
    </md-progress-circular>
</div>

<md-button class="md-raised md-primary" ng-click="$ctrl.setNewVideoRecord()"> Add video</md-button>

self.setNewVideoRecord = function () {
adminService.setNewVideoRecord(self.fileForUpload)
    .then(function () {
});
};

Answer 1

最好的方法是应用范围变量。并在函数内相应地设置该范围变量的值。现在你正在调用一个函数来应用ng-show，但该函数应返回true或false，根据你将显示进度条。最好的方法是：

<div ng-show="$ctrl.videoUploading">
  <md-progress-circular md-mode="indeterminate" md-diameter="100">
  </md-progress-circular>
</div>


<md-button class="md-raised md-primary" ng-click="$ctrl.setNewVideoRecord()"> Add video</md-button>

self.videoUploading = false;
self.setNewVideoRecord = function () {
  self.videoUploading = true;
  adminService.setNewVideoRecord(self.fileForUpload)
   .then(function () {
    // your code here, and when the video uploading is completed again set the variable false
      self.videoUploading = false;
 });
};