Angular-UIブートストラップCarouselでスワイプ作業を行うには？

ui-bootstrap v2.1.4ではスワイプは動作しませんが、v1.3.3では正常に動作していますが、Angular-UIブートストラップCarouselでスワイプ作業を行うには？

エラーの原因となる構文の変更はありますか？
または、UI-Bootstrapのバグですか？

カルーセルdocsスワイプがサポートされていると記載されています。

カルーセルはまた、スワイプの形式でタッチスクリーンデバイスをサポートしています。スワイプを有効にするには、ngTouchモジュールを依存関係としてロードします。

Plunker：ドキュメントへhttps://plnkr.co/edit/odlDYR?p=preview
（スワイプを容易にするために、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

反し、スワイプはでサポートされていませんv2.0.0からv2.1.4まで（少なくとも）これは、changelog

です

カルーセル：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>

参考：UIBのhttps://github.com/angular-ui/bootstrap/issues/6277

出典

2016-11-30 11:50:42 Sangharsh

現在のバージョンは2.4.0で、スワイプはまだ動作しません。私はスコープ変数を 'uib-carousel'の' template-url'属性に渡すことはできません。私の場合は不可能な静的な文字列だけです。テンプレートURLをコントローラに構築する必要があります。 uib-carouselでスワイプを再開する別の方法をご存知ですか？ – Eria

@Eria、あなたの制約を正しく理解しているかどうかはわかりません。 'template-url'はテンプレートのパスである文字列のみをとります。スコープは角度アプリの中にあるので、とにかく利用できます。 '$ parent.vm.next（）'を使うことで、私はカルーセルの親のスコープで利用できる関数を使用しています。 – Sangharsh

'template-url'は正確に文字列をとります。しかし、私の場合、テンプレートURLは静的ではありません。アプリケーション名とそのバージョンからビルドされています。したがって、この文字列は私の指示に基づいて作成され、そのスコープの変数に格納されます。静的な文字列しか受け付けないので、 'uib-carousel'指示文に渡すことはできません。 – Eria

Angular-UIブートストラップCarouselでスワイプ作業を行うには？

答えて

関連する問題