Angular Material 的垂直滑块无法正常工作

Posted

技术标签:

【中文标题】Angular Material 的垂直滑块无法正常工作【英文标题】:Vertical Slider of Angular Material does not work correctly 【发布时间】:2016-10-14 17:43:31 【问题描述】:

我在我的应用程序中使用 Angular Material。如果上面没有内容,它工作正常。但是当我放一些内容出现滚动条的时候,拖的时候就出错了。

工作示例:

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope) 

    $scope.vol = Math.floor(Math.random() * 100);
    $scope.bass = Math.floor(Math.random() * 100);
    $scope.master = Math.floor(Math.random() * 100);
);
<link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet"/>
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>

<!-- remove this -->
<p>My content</p>
<p>My content</p>
<p>My content</p>
<p>My content</p>
<p>My content</p>
<p>My content</p>
<!-- remove this -->

<div ng-controller="AppCtrl" ng-cloak="" class="sliderdemoVertical" ng-app="MyApp">
  <md-content layout="row" layout-padding="">
    <md-slider-container flex="">
      <md-input-container>
        <input flex="" type="number" ng-model="vol" aria-label="volume" aria-controls="volume-slider">
      </md-input-container>
      <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>
    <md-slider-container flex="">
      <md-input-container>
        <input flex="" type="number" ng-model="bass" aria-label="bass" aria-controls="bass-slider">
      </md-input-container>
      <md-slider md-discrete="" ng-model="bass" min="0" max="100" step="10" aria-label="bass" class="md-primary" md-vertical=""></md-slider>
      
      <h5>Bass</h5>
    </md-slider-container>
    <div flex="" layout="column" layout-align="center center">
      <md-slider-container ng-disabled="readonly">
        <md-input-container>
          <input flex="" type="number" ng-model="master" aria-label="master" aria-controls="master-slider">
        </md-input-container>
        <md-slider flex="" ng-model="master" md-discrete="" aria-label="Master" md-vertical="" step="10" ng-readonly="readonly"></md-slider>
        <h5>Master</h5>
      </md-slider-container>
      <md-checkbox ng-model="readonly">Read only</md-checkbox>
    </div>
  </md-content>
</div>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->

Codepen 中与上述相同的示例:here

如果你删除了 html 中的所有内容并且没有滚动条,它可以正常工作。

这是 Angular Material 的错误还是我做错了什么?

非常感谢。

【问题讨论】:

没有代码示例。也许你忘了添加它? :// 抱歉,我无法在帖子中添加 codepen 链接。我设法编辑帖子内容。感谢您的关注。 问题应直接包含相关代码,而不是链接到外部资源。链接可能会损坏,然后问题对未来的访问者不再有价值。 非常感谢。我猜问题出在鼠标事件文档的偏移量上。但不知道为什么它在这里工作:material.angularjs.org/latest/demo/slider 【参考方案1】:

当我使用angular-material 时,我也需要一个滑块,我使用了angular-jk-carousel。它适用于角材料。对于滚动条问题,如果您有导航栏,我认为您应该将导航栏包含到主容器中。

【讨论】:

以上是关于Angular Material 的垂直滑块无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

Angular Material Design:要垂直对齐的单选按钮组

Material-UI 无法导入滑块

无法从 Android Material 滑块中删除填充

屏幕太小时,Angular Material 步进器标题消失

AngularCLI 和 Angular Material(原理图)错误:无法解析集合“@angular/material”

无法导入“@angular/material”模块