如何在 <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);
    }
  }
});

以上是我的代码，我只想在点击时显示进度微调器。我正在使用 angular 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>