Angular Material md-slider：垂直滑块在 md-sidenav 中不起作用

Question

实际行为：

有什么问题？ * md-slider 不能垂直放置在 md-sidenav https://material.angularjs.org/latest/demo/sidenavmaterial.angularjs.org/latest/demo/slider

预期的行为是什么？ 当我将 md-vertical 属性添加到 md-slider 时，它在项目的任何部分都是垂直的，但是当放置在 md-sidenav 中时，它会保持水平

Plnkr 显示问题 https://embed.plnkr.co/7lBplI/ 详细信息：请注意当侧边栏打开时 md 滑块是水平的而不是垂直的，尽管具有垂直属性 Angular 版本：* 角度版本：1.5.3 角材料版本：1.0.9 附加信息：

浏览器类型：* chrome：最新版本 浏览器版本：* Chrome：最新 操作系统：* Mac：OSX 10.10.5

Answer 1

我认为这是因为您使用的是旧版本的 Angular Material。根据您的 angular-material.js 文件的标题，它显示版本 v0.5.1。我认为您已将所有缩小的 JS 文件合并到 docs.js 中，并且无法看到其中的版本或 angular-material.min.js。 p>

我已经剥离了您的示例 - Plunker - 以匹配一个有效的 CodePen 示例。如您所见，CodePen 可以正常工作。

将 Angular Material 更新到最新版本 (v1.1.0)，它应该可以正常工作。

CodePen 标记

<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" md-disable-backdrop="" md-whiteframe="4">
  <div layout-padding="" ng-controller="LeftCtrl">
    <md-slider-container flex>
      <md-slider ng-model="vol" min="0" max="100" aria-label="volume" id="volume-slider" class="md-accent" md-vertical md-range>
      </md-slider>
  <h5>Volume</h5>
  </md-slider-container>
    <p hide="" show-gt-md="">
      This sidenav is locked open on your device. To go back to the default behavior,
      narrow your display.
    </p>
  </div>
</md-sidenav>

<md-content flex="" layout-padding="">
  <div layout="column" layout-fill="" layout-align="top center">
    <div>
      <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
        Toggle left
      </md-button>
    </div>
  </div>
</md-content>