Как я могу использовать ‹md-progress-circular› на ‹ng-click›?

.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, но эти материалы говорят об обратном.

Благодарю вас!


angularjs angularjs-directive angularjs-material
person John Brofser    schedule 23.05.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Поместите 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>
person bamtheboozle    schedule 23.05.2017
comment
Все еще делает то же самое. Может быть, это версия angular? - person John Brofser; 23.05.2017
comment
Что, если вы используете mode="indeterminate" вместо md-mode? - person bamtheboozle; 23.05.2017