角度材料滑塊示例不起作用

-1

我正在嘗試運行角度材料示例here。我試過下面的例子，但它不適合我。通過控制檯以下錯誤角度材料滑塊示例不起作用

錯誤：未捕獲錯誤：[$注射器：modulerr]未能實例化模塊StarterApp由於：錯誤：[$注射器：NOMOD]模塊 'StarterApp' 不可！您拼錯了模塊名稱或忘記加載模塊名稱。如果註冊模塊確保您指定依賴關係作爲第二個參數。

我的代碼如下

的test.html 這是HTML文件的內容

<html lang="en" ng-app="StarterApp"> 
    <head> 
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css"> 
    <link rel="stylesheet" href="test.css"> 
    <meta name="viewport" content="initial-scale=1" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script> 
    <script src="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script> 
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script> 
    <script src="test.js"></script> 
    </head> 
    <body layout="column" ng-controller="AppCtrl"> 
    <div ng-controller="AppCtrl"> 
    <md-content style="margin: 16px; padding:16px"> 
    <h3> 
     RGB <span ng-attr-style="border: 1px solid #333; background: rgb({{color.red}},{{color.green}},{{color.blue}})">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
    </h3> 
    <div layout> 
     <div flex="10" layout layout-align="center center"> 
     <span class="md-body-1">R</span> 
     </div> 
     <md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class> 
     </md-slider> 
     <div flex="20" layout layout-align="center center"> 
     <input type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider"> 
     </div> 
    </div> 
    <div layout> 
     <div flex="10" layout layout-align="center center"> 
     <span class="md-body-1">G</span> 
     </div> 
     <md-slider flex ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent"> 
     </md-slider> 
     <div flex="20" layout layout-align="center center"> 
     <input type="number" ng-model="color.green" aria-label="green" aria-controls="green-slider"> 
     </div> 
    </div> 
    <div layout> 
     <div flex="10" layout layout-align="center center"> 
     <span class="md-body-1">B</span> 
     </div> 
     <md-slider flex ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider" class="md-primary"> 
     </md-slider> 
     <div flex="20" layout layout-align="center center"> 
     <input type="number" ng-model="color.blue" aria-label="blue" aria-controls="blue-slider"> 
     </div> 
    </div> 
    <h3>Rating: {{rating}}/5 - demo of theming classes</h3> 
    <div layout> 
     <div flex="10" layout layout-align="center center"> 
     <span class="md-body-1">default</span> 
     </div> 
     <md-slider flex md-discrete ng-model="rating1" step="1" min="1" max="5" aria-label="rating"> 
     </md-slider> 
    </div> 
    <div layout> 
     <div flex="10" layout layout-align="center center"> 
     <span class="md-body-1">md-warn</span> 
     </div> 
     <md-slider flex class="md-warn" md-discrete ng-model="rating2" step="1" min="1" max="5" aria-label="rating"> 
     </md-slider> 
    </div> 
    <div layout> 
     <div flex="10" layout layout-align="center center"> 
     <span class="md-body-1">md-primary</span> 
     </div> 
     <md-slider flex class="md-primary" md-discrete ng-model="rating3" step="1" min="1" max="5" aria-label="rating"> 
     </md-slider> 
    </div> 
    <h3>Disabled</h3> 
    <md-slider ng-model="disabled1" ng-disabled="true" aria-label="Disabled 1"></md-slider> 
    <md-slider ng-model="disabled2" ng-disabled="true" aria-label="Disabled 2"></md-slider> 
    <h3>Disabled, Discrete</h3> 
    <md-slider ng-model="disabled1" ng-disabled="true" step="3" md-discrete min="0" max="10" aria-label="Disabled discrete 1"></md-slider> 
    <md-slider ng-model="disabled2" ng-disabled="true" step="10" md-discrete aria-label="Disabled discrete 2"></md-slider> 
    </md-content> 
</div> 
    <!-- Angular Material Dependencies --> 

    </body> 
</html>

test.js 文件內容

angular.module('sliderDemo1', ['ngMaterial']) 
.controller('AppCtrl', function($scope) { 
    $scope.color = { 
    red: Math.floor(Math.random() * 255), 
    green: Math.floor(Math.random() * 255), 
    blue: Math.floor(Math.random() * 255) 
    }; 
    $scope.rating1 = 3; 
    $scope.rating2 = 2; 
    $scope.rating3 = 4; 
    $scope.disabled1 = 0; 
    $scope.disabled2 = 70; 
});

test.css

.sliderdemoBasicUsage input[type="number"] { 
    text-align: center; }

這裏有什麼問題？爲什麼它不是爲我工作

來源

2015-06-21 Stack

的問題是，你有這樣的：

<html lang="en" ng-app="StarterApp">

而且這樣的：

angular.module('sliderDemo1'

要麼他們都應該是StarterApp或他們都應該是sliderDemo1：

<html lang="en" ng-app="StarterApp"> 
angular.module('StarterApp'

或者

<html lang="en" ng-app="sliderDemo1"> 
angular.module('sliderDemo1'

另請注意，HTML引用{{rating}}這是從未定義。這在示例的源代碼中似乎是一個錯誤。

來源

2015-06-21 12:58:19

Thanks Mark Leiber – Stack

角度材料滑塊示例不起作用

回答

相關問題