当我更新到 ng-repeat 数组时，猫头鹰 carousel2 项目不会更新答案

【问题标题】：Owl carousel2 item not update when I am update to ng-repeat array当我更新到 ng-repeat 数组时，猫头鹰 carousel2 项目不会更新
【发布时间】：2017-01-02 10:29:35
【问题描述】：

我对使用 angularjs 的 owlCarousel2 滑块感到困扰。

下面是我的 app.js。

var app = angular.module('plunker', []);

这是我的控制器

app.controller('MainCtrl', function($scope) {

**Item array which are showing in slide.**



    $scope.items = [1,2,3,4,5,6,7,8,9,10]
      $scope.addItem = function(arr, $event) {
        $event.preventDefault();
        arr.push(arr[arr.length - 1] +1);
        var firstOwl = $("#first").data('owlCarousel');
        firstOwl.addItem("<p>" + arr[arr.length - 1] + "</p>");
      }
    }).directive("owlCarousel", function() {
        return {
            restrict: 'E',
            transclude: false,
            link: function (scope) {
                scope.initCarousel = function(element) {
                  // provide any default options you want
                    var defaultOptions = {
                    };
                    var customOptions = scope.$eval($(element).attr('data-options'));
                    // combine the two options objects
                    for(var key in customOptions) {
                        defaultOptions[key] = customOptions[key];
                    }
                    // init carousel
                    var curOwl = $(element).data('owlCarousel');
                    if(!angular.isDefined(curOwl)) {
                    $(element).owlCarousel(defaultOptions);
                    }
                    scope.cnt++;
                };
            }
        };
    })
    .directive('owlCarouselItem', [function() {
        return {
            restrict: 'A',
            transclude: false,
            link: function(scope, element) {
              // wait for the last item in the ng-repeat then call init
                if(scope.$last) {
                    scope.initCarousel(element.parent());
                }
            }
        };
    }]);

它工作正常并显示所有 10 张幻灯片，但是当我像下面这样更新项目数组时。

$scope.items = [1,2,3,4,5,6,7,8,9,10,11,12];

$("#owl-demo").trigger('refresh.owl.carousel');

在那之后 12 张幻灯片没有显示与之前相同的滑块。

我怎样才能让我的滑块使用我的 ng-repeat 数组进行更新。

【问题讨论】：

您找到解决方案了吗？我也面临同样的问题。
@VishalSingh 你能看看我的回答吗？也许会有所帮助

标签： angularjs owl-carousel

【解决方案1】：

您可以应用以下步骤来更新 owl carousel 的元素：

更新范围变量后，您必须销毁项目的容器 (element.parent())，使用方法：

$('#owl-demo').trigger('destroy.owl.carousel');

$('#owl-demo').html($('.owl-carousel').find('.owl-stage-outer').html()).removeClass('owl-loaded') ;

销毁后，您必须使用更新的元素再次创建轮播：

$('#owl-demo').owlCarousel({});

第1点和第2点的观察信息可以在以下问题中找到：How to re-render a owl-carousel item?

上面提到的步骤可以正常工作，但是在制作它们的时候没有显示在屏幕上，这是因为数据还没有借给礼物。出于这个原因，您可以使用 $ timeout 函数来执行它们，该函数会延迟其中包含的函数的执行，并在渲染完成后执行它们。下面是一个使用超时的例子：

$timeout(function(){ //this are is in a controller destroyCarousel();//executes what is specified in point 1 loadCarousel();//executes what is specified in point 2 }, 0);

第 3 点观察：此信息可在以下链接中找到：https://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering/

希望对你有用。

【讨论】：