Question

我正在尝试在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();
});

Answer 1

您还需要引用与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

AngularJs卡片无法显示

1 个答案: