如何实现 Angular Deckgrid 以使其显示？

Question

我无法让 Angular Deckgrid 简单地显示图像。我已添加依赖项。我有一个对象。但是，标题屏幕上没有显示任何内容。我在控制台中遇到的唯一错误是 angular-deckgrid: No CSS configuration found。我还将脚本文件包含在 'head' 中。对此的任何帮助将不胜感激。请参见下面的示例代码：

Index.html

 <html ng-app="myApp">
        <script src="javascripts/Angular/angular.min.js"></script>
        <script src="javascripts/Angular/angular-route.min.js"></script>
        <script src="javascripts/bower_components/angular-deckgrid/angular-deckgrid.js"></script>
        <script src="javascripts/imagesloaded.pkgd.min.js"></script>
        <script src="javascripts/Angular/app.js"></script>

               <div ng-controller="mainController">
                 <div deckgrid class="deckgrid" source="photos">
                     <div class="a-card">
                        <h1>{{card.title}}</h1>
                       <img src="" data-ng-src="{{card.src}}">
                     </div>
                </div>
           </div>

app.js

var myApp = angular.module('myApp',['akoenig.deckgrid']);

myApp.controller('mainController', ['$scope',function($scope) {

    $scope.photos = [   {title: 'something here',src: "Images/ipsum/one.jpg"},
                        {title: 'another picture', src: "Images/ipsum/two.jpg"},
                        {title: 'another picture', src: "Images/ipsum/three.jpg"},
                        {title: 'another picture', src: "Images/ipsum/four.jpg"},
                        {title: 'another picture', src: "Images/ipsum/five.jpg"},
                        {title: 'another picture', src: "Images/ipsum/six.jpg"}
                    ];

    }]);

Answer 1

你需要使用这个 css

   <style>
    .deckgrid[deckgrid]::before {
        content: '4 .column.column-1-4';
        font-size: 0;
        visibility: hidden;
    }

    .deckgrid .column {
        float: left;
    }

    .deckgrid .column-1-4 {
        width: 25%;
    }
   </style>

参考：https://github.com/akoenig/angular-deckgrid