Question

标题中加载的脚本和CSS：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"
        integrity="sha256-C6CB9UYIS9UJeqinPHWTHVqh/E1uhG5Twh+Y5qFQmYg="
        crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

ng-Material已加载到应用程序中：

var app = angular.module('app', ['ui.router', 'ngMaterial']);

使用html模板中的滑块：

<md-slider min="0" max="7" ng-model="rate" aria-label="rate" id="rateSlider"></md-slider>

关联的控制器：

app.controller('theController', ['$scope', "$state", 'uiHandler', function ($scope, $state, uiHandler) {
    var handler = new uiHandler($scope, "html/content/theTemplate.html", true);

    $scope.showMenu = true;
    $scope.percentBid = 2.3;
    $scope.topRate = 6;
    $scope.rate = 3.2;
}]);

控件似乎以HTML格式呈现，但实际上没有任何元素可见。我可以在页面检查器中单击它们，但我认为没有正确应用任何CSS样式。

Answer 1

Angular Material取决于几个模块：

angular（显然）
angular-animate
angular-aria

你的例子缺乏最后一个。尝试包括这一行：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.js"></script>

请参阅简化的Plunker example。

角度材质库滑块无法显示

1 个答案: