基於屏幕尺寸的角度材質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

按照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 。當您從寬度小於960像素的設備加載頁面時，sidenav將不會打開。