AngularJS -使用$mdMedia返回当前媒体查询大小

Question

在角JS材料中，我可以使用以下示例查看“xs”媒体查询是否返回true或false，然后可以将变量“objectSize”设置为“100”(如果为真)或“200”(如果为false)：

app.controller('MyController', function($mdMedia, $scope) {
  $scope.$watch(function () { return $mdMedia('xs'); }, function (size) {
       console.log($scope.objectSize = size ? '100' : '200');
   });
});

但是，根据屏幕大小“xs”、“sm”、“md”或“lg”，我如何将“objectSize”设置为100、200、300或400。

Answer 1

它看起来像很多代码，基本上在每种情况下都会重复上面的代码。也许有更好的方法，但我就是这样做的：

app.controller('MyController', function($mdMedia, $scope) {
    $scope.$watch(function () {
        return $mdMedia('xs');
    }, function (xs) {
        if (xs) {
            $scope.imgSize = 140;
        }
    });
    $scope.$watch(function () {
        return $mdMedia('sm');
    }, function (sm) {
        if (sm) {
            $scope.imgSize = 180;
        }
    });
    $scope.$watch(function () {
        return $mdMedia('md');
    }, function (md) {
        if (md) {
            $scope.imgSize = 240;
        }
    });
    $scope.$watch(function () {
        return $mdMedia('lg');
    }, function (lg) {
        if (lg) {
            $scope.imgSize = 300;
        }
    });
});