在Jankuri ng-gallery没有错误实现后没有显示任何内容

时间:2015-11-05 23:00:01

标签: javascript angularjs gallery

所以我提到了这个链接http://demo.jankuri.com/ngGallery/来制作图片库。

我按照指示做了所有事情,但没有显示任何图像。

这是我的控制器

    var check123 = function() {

    for (var i = 0; i < z; i++) {
        var a = {thumb: '../images/offers/'+'123456789/thumbnails/' + objectidphoto[i], img: '../images/offers/'+'123456789/' + objectidphoto[i]};
        arr.push(a);
    }
    console.log(arr);
    console.log(arr[0]);

}
  

这不是我完全控制的唯一重要部分。

这是我的前端代码

    <body ng-app="fileUpload" ng-controller="MyCtrl">
<div>
    <div class="content">
        <ng-gallery images="MyCtrl.arr"></ng-gallery>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="controller14.js"></script>
<script src="ng-infinite-scroll.js"></script>
<script src="ng-infinite-scroll.min.js"></script>
<script type="text/javascript" src="src/js/ngGallery.js"></script>

</body>

角度代码执行时没有任何错误,我得到了正确的响应以换取console.log(arr)。

我做错了什么?

  

更新了细分

控制器

var app = angular.module('fileUpload', ['jkuri.gallery']).
   controller('MyCtrl', function($scope, $document)
    {
        var self = this;
        self.images = [
            {thumb: 'images/offers/'+'123456789/thumbnails/' + '1445524452873_491676259.jpg', img: '../images/offers/'+'123456789/' + '1445524452873_491676259.jpg'},
            {thumb: 'images/offers/'+'123456789/thumbnails/' + '1445524894340_7a668c73cddcd2050821f83be901832a_1426070017.jpg', img: '../images/offers/'+'123456789/' + '1445524894340_7a668c73cddcd2050821f83be901832a_1426070017.jpg'}

        ];
    });

HTML

<body ng-app="fileUpload" ng-controller="MyCtrl">
<div>
        <ng-gallery images="MyCtrl.images"></ng-gallery>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="controller14.js"></script>
<script src="ng-infinite-scroll.js"></script>
<script src="ng-infinite-scroll.min.js"></script>
<script type="text/javascript" src="src/js/ngGallery.js"></script>

</body>

现在我已经完全复制了模块的演示内容。问题仍然存在。前端没有变化。

1 个答案:

答案 0 :(得分:2)

您引用Myctrl.arr,您不需要为控制器名称添加前缀。只是arr应该工作,也就是说,如果你正确地将arr分配给范围。 $ scope.arr.push ...

我会猜测你是不是在做以上两种情况。

UDATED:

你的控制器:

var app = angular.module('fileUpload', ['jkuri.gallery']). controller('MyCtrl', function($scope, $document) { $scope.images = [ {thumb: 'images/offers/'+'123456789/thumbnails/' + '1445524452873_491676259.jpg', img: '../images/offers/'+'123456789/' + '1445524452873_491676259.jpg'}, {thumb: 'images/offers/'+'123456789/thumbnails/' + '1445524894340_7a668c73cddcd2050821f83be901832a_1426070017.jpg', img: '../images/offers/'+'123456789/' + '1445524894340_7a668c73cddcd2050821f83be901832a_1426070017.jpg'} ]; });

你的HTML

<body ng-app="fileUpload" ng-controller="MyCtrl"> <div> <ng-gallery images="images"></ng-gallery> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> <script src="controller14.js"></script> <script src="ng-infinite-scroll.js"></script> <script src="ng-infinite-scroll.min.js"></script> <script type="text/javascript" src="src/js/ngGallery.js"></script> </body>

请注意$ scope赋值和缺少控制器名称。