如何使Angular材质响应“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; 
    } 
    } 
});