Jssor 滑块在 Angular 中不起作用答案

【问题标题】：Jssor Slider not working in AngularJssor 滑块在 Angular 中不起作用
【发布时间】：2015-05-21 09:26:43
【问题描述】：

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

这是我的代码：

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

我尝试了更多的调试方法，例如使用过的 ng-repeat，但图像 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 $} 但幻灯片不起作用。

但如果我从<div> 中删除ng-repeat，那么滑块将正常工作。

编辑：

这是我创建的 plunk http://plnkr.co/edit/QEkjMREOUuzFugctt6fw?p=preview 。 Angular 代码从line no 123 index.html开始

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

【问题讨论】：

此链接stackoverflow.com/questions/26135139/… 可能会有所帮助。
请注意，角度首先渲染，然后是 jssor 滑块。请在jssor滑块初始化之前仔细检查angular渲染的html代码是否正确。
@jssor 在我的情况下，我首先呈现 HTML 代码（包括 jssor 代码），然后是 angular 。意味着我使用 Python 作为后端，Python 呈现 HTML 并提供对角度和角度的响应，我使用指令 <div dynamic="scopeVar"></div> 使角度范围可用
您应该正确渲染角度，然后初始化 jssor 滑块。

标签： javascript jquery angularjs jssor

【解决方案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 角度指令）

【讨论】：

{$ image $} 是调试代码，u 是 jssor 插件使用的属性
上面的代码能用吗？如果没有，请提供一个 plunk 供人们测试和试用您的代码。
我已经用 plunkr url 编辑了我的答案 :) 。祝你好运

【解决方案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()}}

【讨论】：