Angular-Material 是否有某种方式 md-sidenav 和主要内容都可以有焦点答案

【问题标题】：Angular-Material is there some way md-sidenav and main content can both have focusAngular-Material 是否有某种方式 md-sidenav 和主要内容都可以有焦点
【发布时间】：2016-02-01 23:04:13
【问题描述】：

我正在使用 Angular Material 通过 md-sidenav 指令实现滑动导航栏。

index.html

<div flex>
  <md-content>
    <p>Here is content.</p>
    <a href="">Click Me</a><!-- I want to be able click this even when the sidenav is open!!! -->
  </md-content>
</div>

<div ng-controller="SideNavCtrl as sd">
  <md-sidenav class="md-sidenav-right md-whiteframe-z2"
   md-component-id="right"
   md-is-open="sd.rightSideBarOpen"
   md-sidenav-focus=>
    <md-content>
      <p>Side Nav content</p>
    </md-content>
  </md-sidenav>
</div>

这很好用，但是当导航打开时，需要单击两次才能与主窗口中的内容进行交互。我知道这是材料堆叠表范例的预期行为，但这不是我想要的这个项目的行为。有趣的是，当使用md-is-locked-open 属性时，主要内容和sidenav 都是焦点。

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

您可以使用以下 CSS 覆盖背景：

md-backdrop.md-sidenav-backdrop {
  display: none;
}

虽然您可能想在 Github 上开一张票，请求此功能，因为这可能是应该内置的。

https://github.com/angular/material/issues

【讨论】：

【解决方案2】：

为避免失去背景功能（例如，单击时隐藏 sidenav），最好使用 background-color:transparent 而不是更改显示属性

【讨论】：