2

I am troubling with owlCarousel2 slider using angularjs.

My app.js below.

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

this is my controller

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());
                }
            }
        };
    }]);

It is working fine and shows all 10 slides but when I am update item array like below.

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

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

After that 12 slide not showing slider showing same as previous.

How can I do so that my slider will update with my ng-repeat array.

Sa E Chowdary
  • 2,075
  • 15
  • 31
Sachin Solanki
  • 551
  • 2
  • 5
  • 17

1 Answers1

0

You can apply the following steps to update the elements of owl carousel:

  1. After updating the scope variable you must destroy the container of the items (element.parent()), using the methods:

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

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

  1. After destroying you must create the carousel again with the updated elements:

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

Observation of points 1 and 2The information can be found in the following question: How to re-render a owl-carousel item?

  1. The steps mentioned above work correctly, however at the time of making them are not shown on the screen, this is because the data is not yet lent in the gift. For this reason, you can execute them using the $ timeout function, which postpones the execution of the functions that are contained in it and they are executed after the completion of the rendering. Here's an example using 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);

Observation of point 3: This information can be found at the following link:https://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering/

I hope it is useful for you.

jorghe94
  • 169
  • 1
  • 10