角素材庫滑塊不會呈現明顯

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-材料被加載到應用程序：

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。