将 angularjs ng-repeat 应用到 owl-carousel [英] Applying angularjs ng-repeat to owl-carousel
问题描述
<div ng-repeat="项目列表中的项目"><a href="series.html"><img ng-src="{{items.imageUrl}}"/></a><div><a href="series.html"><img src="http://placehold.it/350x150"/></a>
在此处查看轮播:Owl-carousel2
我遇到了一个问题，每当 ng-repeat 指令应用于轮播时，项目都会垂直堆叠而不是水平布局.
如果我省略 ng-repeat 并使用静态项目，那么它就可以正常工作.
是否有我可以编写并应用于 owl-carousel 以维护布局的指令?
还有什么是 ng-repeat 导致转盘破裂?
angular 是否以某种方式剥离了应用于轮播的 owl-carousel 类?
注意*如果手动构建列表，则使用以下方法迭代并附加元素:
var div = document.createElement('div');var anchor = document.createElement('a');var img = document.createElement('img');.....carousel.appendChild(div);然后调用 owl.owlCarousel({..}) 它有效，不确定这是否是最好的解决方法，因为 ng-repeat 使一切变得更容易.
我发现了一个 hack ，如果我将 owl init 包装在一个超时时间然后 ng-repat 工作.
setTimeout(function(){...现在调用 owl init},1000);<小时>
<link rel="stylesheet" href="css/owl.theme.default.min.css"/>.....<script src="/js/lib/owl.carousel.min.js"></script><脚本>$(document).ready(function() {var owl = $('.owl-carousel');owl.owlCarousel({.....});owl.on('mousewheel', '.owl-stage', function(e) {如果(e.deltaY > 0){owl.trigger('next.owl');} 别的 {owl.trigger('prev.owl');}e.preventDefault();});})能够修改来自 DTing 上的指令另一个帖子让它与多个同一页面上的轮播.这是一个有效的 plnkr
-- 编辑--有另一个 plnkr 举例说明如何添加项目.执行 reinit() 不起作用，因为任何时候 owl carousel 被破坏都会丢失数据元素并且永远无法再次初始化.
var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.items1 = [1,2,3,4,5];$scope.items2 = [1,2,3,4,5,6,7,8,9,10];}).directive("owlCarousel", function() {返回 {限制:'E'，转置:假，链接:功能(范围){scope.initCarousel = 函数(元素){//提供你想要的任何默认选项var defaultOptions = {};var customOptions = scope.$eval($(element).attr('data-options'));//合并两个选项对象for(customOptions 中的 var 键){defaultOptions[key] = customOptions[key];}//初始化轮播$(element).owlCarousel(defaultOptions);};}};}).directive('owlCarouselItem', [function() {返回 {限制:'A'，转置:假，链接:函数(范围，元素){//等待 ng-repeat 中的最后一项，然后调用 init如果(范围.$last){scope.initCarousel(element.parent());}}};}]);这是 HTML
<html ng-app="plunker"><头><meta charset="utf-8"/><title>AngularJS Plunker</title><script>document.write('<base href="' + document.location + '"/>');</script><link rel="stylesheet" href="style.css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"/><script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></脚本><script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script><script src="app.js"></script><body ng-controller="MainCtrl"><data-owl-carousel class="owl-carousel" data-options="{navigation: true, pagination: false, rewindNav: false}"><div owl-carousel-item="" ng-repeat="item in ::items1" class="item"><p>{{::item}}</p></data-owl-carousel><data-owl-carousel class="owl-carousel" data-options="{navigation: false, pagination: true, rewindNav: false}"><div owl-carousel-item="" ng-repeat="item in ::items2" class="item"><p>{{::item}}</p>
