如何在<ng-click>上使用<md-progress-circular>？

Question

的.html

<md-button class="btn btn-primary text-center center-block" type="submit" style="padding: 6px 100px" 
ng-click="showSpinner = !showSpinner" class="btn btn-default btn-sm view-mode pull-left" my-click-once keep-width> 

<span ng-show="!showSpinner">Demo of the circular spinner in md-button</span> 

<md-progress-circular ng-show="showSpinner" md-mode="indeterminate"></md-progress-circular> 

</md-button> 

的.js

//Directive for progress spinner 
app.directive('keepWidth', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs, controller) { 
     var width = element.prop('offsetWidth'); 
     var otherCss = element.css('cssText'); 

     attrs.$set('style', 'width: ' + width + 'px;' + otherCss); 
    } 
    } 
}); 

以上是我的代碼，我只是想表明上單擊進度微調。我正在使用角1.5.0，因爲我必須。

當我按下按鈕時，它縮小並刪除文本，這就是全部。我使用https://material.angularjs.org/latest/作爲參考。我被告知這些是angularJS 1（我認爲包括1.5.0）的材料

我做錯了什麼？我的材料是否有誤？不確定angularJS 1是否可以使用md-progress-circular，但這些材料表明否則。

謝謝！

Answer 1

將md-progress放在您的md按鈕外部。此外，請使用ng-if而不是ng-show。

<md-button class="btn btn-primary text-center center-block" type="submit" style="padding: 6px 100px" ng-click="showSpinner = !showSpinner" class="btn btn-default btn-sm view-mode pull-left" my-click-once keep-width> 

<span ng-show="!showSpinner">Demo of the circular spinner in md-button</span> 

</md-button> 
<md-progress-circular ng-if="showSpinner" mode="indeterminate"></md-progress-circular>