Wie man "md-progress-circular" -Komponente aus angularem Material reaktionsfähig macht?

Question

Ich verwende "md-progress-circular" -Komponente - https://material.angularjs.org/latest/demo/progressCircular in meiner App. Aber es ändert nicht die Größe der Bildschirmgröße. Wie man es anpassungsfähig macht? Es wird hilfreich sein, wenn jemand einen Plunker für das gleiche bereitstellen kann.

<md-progress-circular md-mode="determinate" value="100" md-diameter="47"></md-progress-circular> 

Answer 1

Hier ist ein Beispiel dafür, wie es zu tun - CodePen

Die Idee für das Ändern der Größe $window zu überprüfen ist, und dann den Durchmesser der entsprechend md-progress-circular ändern.

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column"> 
    <div flex layout="column", layout-align="center center"> 
    <md-progress-circular md-diameter="{{diameter}}"></md-progress-circular> 
    </div> 
</div> 

JS

angular.module('MyApp',['ngMaterial', 'ngMessages']) 

.controller('AppCtrl', function($scope, $window, $mdMedia) { 
    resizeProgress(); 

    angular.element($window).bind("resize", function() { 
    resizeProgress(); 
    $scope.$apply(); 
    }); 

    function resizeProgress() { 
    if ($mdMedia("gt-xs")) { 
     $scope.diameter = 200; 
    } 
    else if ($mdMedia("xs")) { 
     $scope.diameter = 100; 
    } 
    } 
});