分享程序员开发的那些事...
更新时间：2022-10-19 12:33:02
您缺少的角动画模块。你需要将它添加到你的脚本列表：
＆LT;脚本的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=$p$pview
I am looking to use the Angular Bootstrap Carousel Directive in an application I am building.
I am able to implement it just fine, but the transition isn't working how it shows in the documentation. What should be happening is the old image slides out to the left, with the new image sliding in from the right.
I also noticed that if you hit 'Edit Plunkr' to see the code they used, it is strangely enough doing the same thing I am seeing on my local implementation.
Direct code taken from their documentation below:
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>
What I am seeing is that it just switches to the new image, no slide, no nothing.
What is the missing piece here? Is it a bug, or something else?
You are missing the angular animate module. You need to add it to your scripts list:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.min.js"></script>
and then into your module like this:
angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngAnimate']);
Here is a fork of the plunker with nganimate added in: http://plnkr.co/edit/E7j7KiZmCzIg629vWTnt?p=preview