Question

我无法让Angular Deckgrid显示图像。我添加了依赖项。我有一个对象。然而，屏幕上没有任何内容出现在标题上。我在控制台中遇到的唯一错误是angular-deckgrid：找不到CSS配置。我还将脚本文件包含在'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

如何实现Angular Deckgrid以便显示？

1 个答案: