2016-09-29 75 views
0

我想在AngularJs上顯示卡,但它似乎並沒有工作。我從他們的文檔中獲得了代碼,嘗試過但它不起作用。任何想法爲什麼?AngularJs卡不顯示

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
Your grades: 
 
<div ng-controller="StudentDashboard" ng-cloak > 
 
    <md-content class="md-padding" layout-xs="column" layout="row"> 
 
     <div flex-xs flex-gt-xs="50" layout="column"> 
 
      <md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch> 
 
       <md-card-title> 
 
        <md-card-title-text> 
 
         <span class="md-headline">Card with image</span> 
 
         <span class="md-subhead">Large</span> 
 
        </md-card-title-text> 
 
        <md-card-title-media> 
 
         <div class="md-media-lg card-media"></div> 
 
        </md-card-title-media> 
 
       </md-card-title> 
 
       <md-card-actions layout="row" layout-align="end center"> 
 
        <md-button>Action 1</md-button> 
 
        <md-button>Action 2</md-button> 
 
       </md-card-actions> 
 
      </md-card> 
 

 
</div> 
 
     </md-content> 
 
    </div>

輸出只是沒有卡,所以我想知道什麼地方出了錯純文本?

爲StudentDashboard控制器如下:

angular.module('G1.StudentDashboard', ['ngMaterial']) 

.controller('StudentDashboard', function($scope) { 
    $scope.imagePath = 'img/washedout.png'; 
}) 
.config(function($mdThemingProvider) { 
    $mdThemingProvider.theme('dark-grey').backgroundPalette('grey').dark(); 
    $mdThemingProvider.theme('dark-orange').backgroundPalette('orange').dark(); 
    $mdThemingProvider.theme('dark-purple').backgroundPalette('deep-purple').dark(); 
    $mdThemingProvider.theme('dark-blue').backgroundPalette('blue').dark(); 
}); 
+0

有你提供一個腳本參考角材料,並添加ngMaterial到你的模塊聲明? – paul

+0

是的,我在模塊聲明中添加了ngMaterial,如上面的代碼片段所示,但它仍然不起作用 – purplewind

回答

4

您需要參考相關ngMaterial以及其他腳本,

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script> <!-- Use dev version of Angular Material --> 
    <script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script> 

DEMO