@H_404_2@
在ui-bootstrap v2.1.4中滑动无法在Carousel中工作,而它在v1.3.3中工作正常
新版本中的语法更改是否会导致错误？
或者它是UI-Bootstrap中的错误？
The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping,load the ngTouch module as a dependency.
Plunker：https://plnkr.co/edit/odlDYR?p=preview
(为了便于滑动,可以使用QR码在移动设备上打开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>
解决方法
与文档相反,Carousel从v2.0.0到v2.1.4(至少)不支持滑动
提到的是在 changelog
提到的是在 changelog
carousel: Due to the removal of replace: true,this causes a slight HTML structure change to the carousel and the slide elements – see documentation demos to see how it changes. This also caused removal of the ngTouch built in support – if one is using ng-touch,one needs to add the ng-swipe-left and ng-swipe-right directives to the carousel element with relevant logic.
要启用滑动,请使用template-url指定自定义模板,并在那里使用ng-swipe- *指令.例如.
<div class="carousel-inner" ng-swipe-left="$parent.vm.next()" ng-swipe-right="$parent.vm.prev()" ng-transclude> </div>
@H_404_2@
