Подтвердить что ты не робот

Применение угловых ng-повторов к сова-карусели

<div class="owl-carousel">
    <div ng-repeat="items in itemlist"> 
        <a href="series.html"><img ng-src="{{items.imageUrl}}" /></a>
    </div>
    <div> 
      <a href="series.html"><img src="http://placehold.it/350x150" /></a>
    </div>
 </div>

Просмотр карусели здесь: Сова-карусель2

Я столкнулся с проблемой, когда всякий раз, когда директива ng-repeat применяется к карусели, элементы располагаются вертикально, а не горизонтально.

Если я оставлю ng-repeat и использую статические элементы, то он работает так, как должен.

Есть ли директива, которую я могу написать и применить к сова-карусель для поддержки макета?

И что такое ng-repeat, вызывающий разрывание карусели?

Является ли angular каким-то образом лишающим классы совы-карусели, примененными к карусели?

Примечание. * Если вы создадите список вручную, повторите и добавьте элементы, используя:

var div = document.createElement('div');
var anchor = document.createElement('a');
var img = document.createElement('img');            
.....       
carousel.appendChild(div);

затем вызовите owl.owlCarousel({..}). Он работает, не уверен, что это лучшая работа, потому что ng-repeat упрощает все бит.

Я обнаружил хак, если я завершаю инициализацию совы в таймаут, тогда работает ng-repat.

setTimeout(function(){
      ...call owl init now  
},1000);

<link rel="stylesheet" href="css/owl.carousel.css"/>
<link rel="stylesheet" href="css/owl.theme.default.min.css"/>

.....
    <script src="/js/lib/owl.carousel.min.js"></script> 
        <script>
             $(document).ready(function() {
               var owl = $('.owl-carousel');
               owl.owlCarousel({
                 .....
               });
               owl.on('mousewheel', '.owl-stage', function(e) {
                 if (e.deltaY > 0) {
                   owl.trigger('next.owl');
                 } else {
                   owl.trigger('prev.owl');
                 }
                 e.preventDefault();
               });
             })

        </script>
4b9b3361

ОТВЕТЫ

Ответ 1

Могла изменить директиву DTing на другой пост, чтобы заставить ее работать с несколькими карусели на той же странице. Вот рабочий plnkr

- Изменить - У вас есть еще один plnkr, чтобы привести пример добавления элемента. Выполнение функции reinit() не срабатывало, так как любое время, когда карусель совы уничтожается, теряет элементы данных и никогда не может снова инициализироваться.

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() {
    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
                $(element).owlCarousel(defaultOptions);
            };
        }
    };
})
.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());
            }
        }
    };
}]);

Вот HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <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="[email protected]" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script data-require="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
    <script src="app.js"></script>
  </head>

  <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>
      </div>
    </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>
      </div>
    </data-owl-carousel>
  </body>

</html>

Ответ 2

Я пытался возиться с разными директивами, но мне не повезло, пока я не обнаружил это, это может немного исправить, но тем не менее работает.

Вот моя настройка div:

<div ng-repeat="item in mediaitems">
  <img ng-src="item.imageurl" />
</div>

$scope.mediaitems генерируется с использованием вызова ajax. Я обнаружил, что если я отложил инициализацию совы до тех пор, пока мой список не будет заполнен, это сделает его правильно. Также, если вы решите, что хотите обновить список, вы динамически просто вызываете функцию setupcarousel (смотрите ниже) после того, как список был заполнен, и он перезапустит карусель.

Обратите внимание, что carousel init находится во внешнем файле в анонимной функции. Это то, что я выбрал, чтобы настроить его, вы можете иметь свои собственные или, как вам угодно.

В моем контроллере у меня было что-то вроде этого:

$scope.populate = function(){
     $timeout(function(){   
      $scope.mediaitems  = returnedlist;   //list of items retrun from server
       utils.setupcarousel();              //call owl initialization
     });
};

var utils = (function(){
    var setupcarousel = function(){
        console.log('setting up carousel..');
         var owl = $('.owl-carousel');
         if(typeof owl.data('owlCarousel') != 'undefined'){
             owl.data('owlCarousel').destroy();
             owl.removeClass('owl-carousel');
         }

        owl.owlCarousel({
            loop: false,
            nav: true,
            margin: 10,
            responsive: {
              0: {items: 3 },
              600: {items: 5},
              960: { items: 8},
              1200:{items: 10},
              1600:{items: 12}
            }
          });
    };

    return{
      ....
    }

})();

Ответ 3

Команда пользовательского интерфейса Angular собрала набор компонентов бутстрапа, реализованных в виде Angular. Они супер гладкие и быстрые для реализации, и поскольку они являются директивами, вы не сталкиваетесь с проблемами с использованием jquery в проекте Angular. Одной из директив является карусель. Здесь вы можете найти здесь и здесь. Я долгое время работал с каруселями angular. Я получил сову для работы после некоторого раздражающего возиться, но реализация AngularUI намного проще.

Ответ 4

Это тот же ответ, что и JKOlaf. Однако я добавил отзывчивое поведение, которое обеспечивает лучший UX. 2 основных улучшения:  1. Полностью отзывчивый код, обеспечивающий лучший UX на разных устройствах.  2. Теперь свойство "autoHeight" обрабатывается уменьшенным миниатюром изображений.

Код идет ниже:

	
Was able to modify a directive from DTing on another post to get it working with multiple carousels on the same page. Here is a working plnkr

-- Edit -- Have another plnkr to give an example on how to add an item. Doing a reinit() did not work cause any time the owl carousel is destroyed it loses the data- elements and can never initialize again.

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() {
    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];
                }
                defaultOptions['responsive'] = {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 3
                    },
                    1000: {
                        items: 6
                    }
                };
                // init carousel
                $(element).owlCarousel(defaultOptions);
            };
        }
    };
})
.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());
            }
        }
    };
}]);