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

【问题标题】：Angular material md-sidenav set md-is-open value based on screen sizeAngular 材质 md-sidenav 根据屏幕大小设置 md-is-open 值
【发布时间】：2016-03-25 14:39:44
【问题描述】：

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

【问题讨论】：

标签： angularjs angularjs-directive angularjs-material

【解决方案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 将不会打开。

【讨论】：

感谢您的回答，它是有效的。以前从未将 $mdMedia('gt-sm') 放在模型中。