【问题标题】：How to make Swipe work in Angular-UI bootstrap Carousel?如何使 Swipe 在 Angular-UI 引导轮播中工作？
【发布时间】：2018-03-16 16:32:33
【问题描述】：

在 ui-bootstrap v2.1.4 中，Swipe 在 Carousel 中不起作用，而在 v1.3.3 中却可以正常工作

新版本中是否有任何语法更改导致错误？
还是它是 UI-Bootstrap 中的错误？

Carousel docs 提到支持滑动。

轮播还以滑动的形式提供对触摸屏设备的支持。要启用滑动，请将 ngTouch 模块作为依赖项加载。

Plunker：https://plnkr.co/edit/odlDYR?p=preview
（为了方便刷卡，plunker可以用二维码在手机上打开。）

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>

【问题讨论】：

标签： angularjs angular-ui-bootstrap swipe

【解决方案1】：

与文档相反，从 v2.0.0 到 v2.1.4（至少）在 Carousel 中不支持滑动提到在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>

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

【讨论】：

当前版本的 uib 是 2.4.0 并且滑动仍然不起作用。而且我不能将范围变量传递给uib-carousel 的template-url 属性，只能传递一个静态字符串，这在我的情况下是不可能的：我需要在控制器中构建模板URL。你知道在 uib-carousel 上重新激活滑动的另一种方法吗？
@Eria，我不确定我是否正确理解了您的约束。 template-url 只接受一个字符串，它是模板的路径。 Scope 无论如何都是可用的，因为它在 Angular 应用程序中。通过使用$parent.vm.next()，我只是在使用轮播父级范围内可用的函数。
template-url 准确地接受一个字符串。但是，就我而言，模板 URL 不是静态的：它是根据应用程序名称和版本构建的。所以这个字符串是由我的指令构建的，并存储在其范围的变量中。我不能将它传递给uib-carousel 指令，因为它只接受静态字符串...

【解决方案2】：

试试这个

我们更改活动幻灯片范围变量的另一种方法。

使用

Angular 1.6.6
ngTouch 1.6.6
UI 引导 2.5.0

模板

<div uib-carousel active="active" class="carousel-inner" role="listbox" interval="myInterval" no-wrap="noWrapSlides"
            ng-swipe-left="changeSlide('left')"
            ng-swipe-right="changeSlide('right')">
            <div uib-slide ng-repeat="slide in slides" class="wrapper">
                <div style="position:relative;">
                    <img class="img-responsive" ng-src="{{slide.url}}"></div>
                </div>
            </div>
        </div>
    </div>

控制器

$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
$scope.slides = [{url: 'image1.jpeg'},{url: 'image2.jpg'}];

$scope.changeSlide = function (direction) {
    var index = $scope.active;
    if (direction === 'right') {
        $scope.active = (index <= 0 ? 0 : index - 1);
        return;
    }
    if (direction ==='left') {
        $scope.active = (index >= ($scope.slides.length - 1) ? ($scope.slides.length - 1) : index + 1);
        return;
    }
};

【讨论】：