angularjs - Angular 材质 md-sidenav 根据屏幕大小设置 md-is-open 值

Question

我正在尝试根据屏幕尺寸设置 md-is-open。像 $mdMedia('gt-sm') 这样的东西。对于 md-is-locked-open 可以用 $mdMedia('gt-sm') 设置，但不知道为什么 md-is-open 不能用它设置。目前我的代码如下所示： <md-sidenav md-is-open="$mdMedia('gt-sm')"></md-sidenav>

Answer 1

根据文档，md-is-open属性可以是

绑定到 sidenav 是否打开的模型。

因此，您可以在控制器中定义模型并将其分配给md-is-open属性，例如

// Controller
$scope.shouldLeftBeOpen = $mdMedia('gt-sm');

你可以像这样使用它

<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-open="shouldLeftBeOpen"></md-sidenav>

这是一个工作的codepen。当您从宽度小于 960 像素的设备加载页面时，不会打开 sidenav。