AngularJS Material：如何按屏幕尺寸动态设置objectSize变量

嘿，这个需求在AngularJS Material里实现起来挺直观的，核心就是利用它内置的$mdMedia服务来检测当前屏幕的断点类型，然后动态设置你的objectSize变量。我给你两种常用的实现方式，你可以根据场景选：

这种方式适合需要在控制器里复用objectSize变量的场景，通过$watch实时监听媒体查询的变化，自动更新变量：

angular.module('yourApp').controller('YourController', ['$scope', '$mdMedia', function($scope, $mdMedia) {
    // 初始化时先设置一次
    updateObjectSize();

    // 监听所有断点的变化，一旦屏幕尺寸切换就更新变量
    $scope.$watch(
        () => $mdMedia('xs') || $mdMedia('sm') || $mdMedia('md') || $mdMedia('lg'),
        () => updateObjectSize()
    );

    // 封装更新逻辑的函数
    function updateObjectSize() {
        if ($mdMedia('xs')) {
            $scope.objectSize = 100;
        } else if ($mdMedia('sm')) {
            $scope.objectSize = 200;
        } else if ($mdMedia('md')) {
            $scope.objectSize = 300;
        } else if ($mdMedia('lg')) {
            $scope.objectSize = 400;
        }
    }
}]);

简单说下原理：$mdMedia('断点名称')会返回一个布尔值，代表当前屏幕是否匹配该断点的媒体查询（默认xs是<600px，sm是600px-959px，md是960px-1279px，lg是≥1280px）。我们通过$watch监听这些状态的变化，一旦切换就重新计算objectSize。

如果只是需要在模板里展示这个尺寸值，不需要在控制器里做其他逻辑，可以直接在模板中调用函数：

<!-- 模板里的用法 -->
<div ng-style="{ width: getObjectSize() + 'px', height: getObjectSize() + 'px' }">
    当前尺寸：{{ getObjectSize() }}
</div>

控制器里只需要定义这个计算函数：

angular.module('yourApp').controller('YourController', ['$scope', '$mdMedia', function($scope, $mdMedia) {
    $scope.getObjectSize = function() {
        if ($mdMedia('xs')) return 100;
        if ($mdMedia('sm')) return 200;
        if ($mdMedia('md')) return 300;
        return 400;
    };
}]);

不过要注意：这种方式每次Angular的digest循环都会执行函数，虽然简单但性能不如第一种，适合页面元素不多的场景。

如果默认的断点尺寸不符合你的需求，还可以在配置阶段自定义媒体查询规则：

angular.module('yourApp').config(function($mdMediaProvider) {
    $mdMediaProvider.register('xs', '(max-width: 599px)');
    $mdMediaProvider.register('sm', '(min-width: 600px) and (max-width: 959px)');
    $mdMediaProvider.register('md', '(min-width: 960px) and (max-width: 1279px)');
    $mdMediaProvider.register('lg', '(min-width: 1280px)');
});

这样就能完全按照你的需求来定义各断点的屏幕范围啦~

内容的提问来源于stack exchange，提问作者Andy