Question

我在使用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];

$（ “＃猫头鹰演示”）的触发（ 'refresh.owl.carousel'）;

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

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

Answer 1

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

更新范围变量后，必须使用以下方法销毁项目的容器（element.parent（））：

$（ '＃猫头鹰-演示'）触发（ 'destroy.owl.carousel'）;

$（ '＃猫头鹰-演示'）。HTML（$（ '猫头鹰传送带 '）。找到（'。猫头鹰级-外 '）。HTML（））。removeClass（' 猫头鹰加载'） ;

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

$（ '＃猫头鹰-演示'）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/

我希望它对你有用。

当我更新ng-repeat阵列时，猫头鹰carousel2项目不更新

1 个答案: