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

-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

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

回答

相关问题