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

Question

我正在尝试根据屏幕大小设置md-is-open。像$ mdMedia（＆＃39; gt-sm＆＃39;）之类的东西。对于md-is-locked-open可以使用$ mdMedia（＆＃39; gt-sm＆＃39;）设置，但不知道为什么md-is-open不能设置。目前我的代码如下： <md-sidenav md-is-open="$mdMedia('gt-sm')"></md-sidenav>

Answer 1

根据docs，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。从宽度小于960px的设备加载页面时，sidenav将不会打开。