如何使用角材料的圓形進度條

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