角材から「md-progress-circular」コンポーネントを作成するにはどうすればいいですか？

Question

私のアプリで "md-progress-circular"コンポーネント - https://material.angularjs.org/latest/demo/progressCircularを使用しています。しかし、それは画面サイズごとにサイズ変更されていません。応答性にするにはどうすればいいですか？誰もが同じようなプランナーを提供できるなら、それは役に立ちます。

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

Answer 1

ここでそれを行う方法の一例だ - CodePen

アイデアは$windowのサイズ変更をチェックし、それに応じてmd-progress-circularの直径を変更することです。

マークアップ

<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; 
    } 
    } 
});