Angular material md-sidenav 根据屏幕大小设置 md-is-open 值

Angular material md-sidenav set md-is-open value based on screen size

我正在尝试根据屏幕尺寸设置 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>

根据docsmd-is-open属性可以是

A model bound to whether the sidenav is opened.

因此,您可以在控制器中定义一个模型并将其分配给 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。当您从宽度小于 960px 的设备加载页面时,sidenav 将不会打开。