我将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.
-->
&#13;
与Codepen相同的示例:here
如果删除HTML中的所有内容并且没有滚动条,则可以正常工作。
这是Angular Material的错误还是我做错了什么?
非常感谢。
答案 0 :(得分:0)
当我使用angular-material
时,我也需要一个滑块,我使用了angular-jk-carousel。它的角质材料很好用。对于滚动条问题,如果你有导航栏,你应该将导航栏包含在我认为的主容器中。