2017-05-23 6 views
0

<ng-click>에서 <md-progress-circular>를 어떻게 사용할 수 있습니까?

.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를 사용할 수 있는지는 확실하지 않지만, 그 재료들은 다른 방법을 제안합니다.

감사합니다.

답변

0

md-progress을 md 버튼 외부에 배치하십시오. 또한 ng-show 대신 ng-if을 사용하십시오.

<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> 
+0

여전히 동일합니다. 각도의 버전 일 수 있습니까? –

+0

'md-mode' 대신'mode = "indeterminate"를 사용하면 어떨까요? –

+0

는 그것을 시도했다 : 나는 그걸로 계속 놀 것이다. –