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

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; 
}); 
};