Как заставить Swipe работать в Angle-UI bootstrap Carousel?

Проводник не работает в карусели в ui-bootstrap v2.1.4, тогда как он отлично работает с v1.3.3Как заставить Swipe работать в Angle-UI bootstrap Carousel?

Это какое-либо синтаксическое изменение в новой версии, вызывающее ошибку?
ИЛИ это ошибка в UI-Bootstrap?

Carousel docs упоминает, что салфетка поддерживается.

Карусель также предлагает поддержку сенсорных устройств в форме прокрутки. Чтобы включить прокрутку, загрузите модуль ngTouch в качестве зависимости.

Plunker: https://plnkr.co/edit/odlDYR?p=preview
(. Для удобства Swiping, plunker можно открыть на мобильном телефоне с QR-кодом)

var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ui.bootstrap']); 
 

 
app.controller('CarouselDemoCtrl', function ($scope) { 
 
    $scope.myInterval = 0; 
 
    $scope.noWrapSlides = false; 
 
    $scope.active = 0; 
 
    var slides = $scope.slides = []; 
 
    var currIndex = 0; 
 

 
    $scope.addSlide = function() { 
 
    var newWidth = 600 + slides.length + 1; 
 
    slides.push({ 
 
     image: '//unsplash.it/' + newWidth + '/300', 
 
     text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4], 
 
     id: currIndex++ 
 
    }); 
 
    }; 
 

 
    for (var i = 0; i < 4; i++) { 
 
    $scope.addSlide(); 
 
    } 
 
});

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <meta http-equiv="X-UA-Compatible" 
 
     content="IE=edge" /> 
 
    <meta name="viewport" 
 
     content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 
 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-touch.js"></script> 
 
    <!-- v1.3.3 swipe works; v2.1.4 swipe does not work --> 
 
    <!--<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>--> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.4.js"></script> 
 
    <script src="carousel.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="CarouselDemoCtrl"> 
 
    <div style="height: 305px"> 
 
    <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides"> 
 
     <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"> 
 
     <img ng-src="{{slide.image}}" style="margin:auto;"> 
 
     <div class="carousel-caption"> 
 
      <h4>Slide {{slide.id}}</h4> 
 
      <p>{{slide.text}}</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    </body> 
 
</html>

источник

2016-10-07 Sangharsh

В отличие от документации, Размах не поддерживается Карусель от версии 2.0 до v2.1.4 (не менее) Указано в changelog

carousel: Из-за удаления replace: true это приводит к изменению структуры HTML в карусели и слайдовых элементах - см. Демонстрации документации, чтобы увидеть, как она изменяется. Это также вызвало удаление встроенной поддержки ngTouch - если вы используете ng-touch, нужно добавить директивы ng-swipe-left и ng-swipe-right в элемент карусели с соответствующей логикой.

Чтобы включить салфетки, указать пользовательский шаблон, используя template-url и использовать ng-swipe-* директив там. Например.

<div class="carousel-inner" 
    ng-swipe-left="$parent.vm.next()" 
    ng-swipe-right="$parent.vm.prev()" 
    ng-transclude> 
</div>

Ref: https://github.com/angular-ui/bootstrap/issues/6277

источник

2016-11-30 11:50:42 Sangharsh

Текущая версия UIB является 2.4.0 и красть по-прежнему не работает. И я не могу передать переменную scope в атрибут 'template-url'' uib-carousel', только статическую строку, что невозможно в моем случае: мне нужно создать URL-адрес шаблона в контроллере. Вы знаете еще один способ реактивировать салфетки на uib-карусели? – Eria

@Eria, я не уверен, правильно ли я понял ваше ограничение. 'template-url' принимает только строку, которая является шаблоном. Область видимости доступна в любом случае, так как она находится внутри приложения с угловыми углами. Используя '$ parent.vm.next()', я просто использую функцию, доступную в объеме родителя карусели. – Sangharsh

'template-url' берет строку точно. Но в моем случае URL-адрес шаблона не является статическим: он построен из имени приложения и его версии. Итак, эта строка построена по моей директиве и хранится в переменной ее области. Я не могу передать его в директиву 'uib-carousel', поскольку он принимает только статическую строку ... – Eria

Как заставить Swipe работать в Angle-UI bootstrap Carousel?

ответ

Смежные вопросы