Nic*_*ick 2 angularjs angular-bootstrap
我希望在我正在构建的应用程序中使用Angular Bootstrap Carousel Directive.
我能够很好地实现它,但转换不起作用如何在文档中显示.应该发生的是旧图像向左滑动,新图像从右侧滑入.
我还注意到,如果你点击'编辑Plunkr'来查看他们使用的代码,那就像我在本地实现中看到的那样做得很奇怪.
直接代码取自以下文档:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: 'http://placekitten.com/' + newWidth + '/300',
text: ['More', 'Extra', 'Lots of', 'Surplus'][slides.length % 4] + ' ' + ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
});<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
</div>
</body>
</html>我所看到的是它只是切换到新图像,没有幻灯片,没有任何东西.
这里遗失的是什么？这是一个bug还是别的什么？
Leo*_*mer 11
您缺少角度动画模块.您需要将其添加到脚本列表中:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.min.js"></script>
然后进入你的模块:
angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngAnimate']);
这是一个带有nganimate的plunker的分叉: http://plnkr.co/edit/E7j7KiZmCzIg629vWTnt?p=preview
| 归档时间： |
|
| 查看次数： |
4257 次 |
| 最近记录： |