Question

我在angular中使用 jssor 滑块，意味着图片将是动态的，来自db。我将使用ng-repeat循环遍历多个图像。

这是我的代码：

"<div ng-repeat='image in images'> <img u=\"thumb\" src=\" {$ image.path $} /" />\n<img u=\"{$ image.path $} \" /></div>"

我尝试了更多的东西来调试，比如使用ng-repeat，但是image src是静态的

<div ng-repeat='image in images'> {$ image $} <img u=\"thumb\" src=\"http://cdn1.spiegel.de/images/image-52390-galleryV9-cxso.jpg\" />\n<img u=\"image\" src=\"http://cdn1.spiegel.de/images/image-52390-galleryV9-cxso.jpg\" /></div>"

以上代码将打印{$ image $}，但幻灯片不起作用。

但如果我从ng-repeat删除<div>，则滑块可以正常使用。

编辑：

这是我创建的插件http://plnkr.co/edit/QEkjMREOUuzFugctt6fw?p=preview。角度代码从line no 123 index.html

开始

如果删除角度ng-repeat并将静态图像添加到滑块。它会起作用。

Answer 1

我尝试了你的plunkr和allimages不在$ scope。您似乎没有以正确的方式初始化控制器。

我更改了以下内容：

<html ng-app="myApp">

和script.js

var app = angular.module("myApp", [ ]);

app.controller("Ctrl", function ($scope) { ... }

See updated plunkr（图片显示，但没有滑动，但它会帮助您走上正轨）

或签出https://github.com/adebisi-fa/dang-jssor（Jssor angular directive）

Answer 2

<script>
    function Ctrl($scope) {
        $scope.allimages = [
        {
            "pk": "291512b7-d72e-4341-9f2e-226f55421318",
            "content": {
                "fields": [
                  "title",
                  "image"
                ],
                "image": "http://www.hdwallpapers.in/walls/green_sea_view-wide.jpg",
                "title": "Lorem Ipsum 0"
            }
        },
        {
            "pk": "1adeeac2-5963-4bbf-9fb7-c55b1d9b8dea",
            "content": {
                "fields": [
                  "title",
                  "image"
                ],
                "image": "https://theartgalleryumd.files.wordpress.com/2011/10/dsc0017.jpg",
                "title": "Lorem Ipsum 0"
            }
        },
        {
            "pk": "e021f394-64af-42a8-88ae-daa013f74397",
            "content": {
                "fields": [
                  "title",
                  "image"
                ],
                "image": "http://cdn1.spiegel.de/images/image-52390-galleryV9-cxso.jpg",
                "title": "Lorem Ipsum 0"
            }
        }
        ];

        $scope.postBind = function () {
            if ($scope.databound) {
                jssor_slider1_starter('slider1_container');
            }
            else {
                $scope.databound = true;
            }
        };
    }
</script>


<div u="slides" style="cursor: move; position: absolute; left: 240px; top: 0px; width: 720px; height: 480px; overflow: hidden;">
    <div ng-repeat="image in allimages">
        <img u="image" src="{{image.content.image}}" />
        <img u="thumb" src="{{image.content.image}}" />
    </div>
</div>
{{postBind()}}

Jssor Slider不在Angular工作

2 个答案: