首页 其他开发 angularjs corousel 停止工作
angularjs corousel 停止工作
[英] angularjs corousel stops working
本文介绍了angularjs corousel 停止工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 ui-bootstrap 为 angularjs 制作一个旋转木马，我基本上是直接从 angular 文档中复制/粘贴的，它可以工作，但它在最后一张幻灯片上停止工作.
它不会回到开始，控件停止工作，我没有在控制台上收到任何错误，它只是停止工作
<slide ng-repeat="slide in carousel" active="slide.active"><img class="img-responsive" ng-src="app/assets/img/articles/{{slide.img}}" style="margin:auto;"></幻灯片></轮播> 我再次检查并且它不会在最后一张幻灯片停止工作，实际上它在第二张停止工作，无论有多少元素.
我仅使用轮播创建了一个测试站点，但仍然无法正常工作
这是整个代码，它停在第 2 张幻灯片，控件停止工作
<头><title>Radiosan 网站</title><link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap.min.css"><link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap-theme.min.css"><script src="app/assets/lib/jquery/jquery-2.1.0.min.js" ></script><script src="app/assets/lib/bootstrap/dist/js/bootstrap.min.js" ></script><script src="app/assets/lib/angular/angular.min.js" ></script><script src="app/assets/lib/angular/angular-route.min.js" ></script><script src="app/assets/lib/angular/angular-animate.min.js" ></script><script src="app/assets/lib/angular/ui-bootstrap-tpls-0.10.0.min.js"></script><script src="app/RadiosanApp.js" ></script><body ng-app="RadiosanApp"><div class="容器"><div ng-controller="MainController"><div style="height: 305px"><轮播间隔=myInterval"><slide ng-repeat="slide in slides" active="slide.active"><img ng-src="{{slide.image}}" style="margin:auto;"><div class="carousel-caption"><h4>滑动{{$index}}</h4><p>{{slide.text}}</p> </幻灯片></轮播>
<div class="row"><div class="col-md-6"><a class="btn btn-info" ng-click="addSlide()">添加幻灯片</a>
<div class="col-md-6">间隔，以毫秒为单位:
<script src="app/controllers/MainController.js"></script>
var app =角度模块(RadiosanApp"，["ngRoute","ui.bootstrap","ngAnimate",RadiosanApp.Controllers.MainController"]);angular.module("RadiosanApp.Controllers.MainController", []).controller("MainController", function($scope) {$scope.myInterval = 5000;var 幻灯片 = $scope.slides = [];$scope.addSlide = function() {var newWidth = 600 + slides.length;幻灯片.推({图片:'http://placekitten.com/' + newWidth + '/300',文本:['更多','额外','很多','剩余'][slides.length % 4] + ' ' +['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]});};for (var i=0; i<4; i++) {$scope.addSlide();}});
解决方案
ui.bootstrap 和 ngAnimate 之间的兼容性问题.... https://github.com/angular-ui/bootstrap/issues/1350
Im trying to make a carousel with ui-bootstrap for angularjs, i basically copied/pasted directly from the angular docs, and it works BUT it stops working at the last slide.
It does not come back to the beggining, and the controls stop working, im not getting any errors on the console, it simply stops working
<carousel interval="myInterval">
<slide ng-repeat="slide in carousel" active="slide.active">
<img class="img-responsive" ng-src="app/assets/img/articles/{{slide.img}}" style="margin:auto;">
</slide>
</carousel>
EDIT: I have checked again And it does not stops working at the Last Slide, actually it stops at the SECOND, no matter how many elements there are.
EDIT: I made a test site just with the carousel and still is not working
This is the whole code, it stops at slide 2 and the controls stop working
<html >
<head>
<title>Radiosan Site</title>
<link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap-theme.min.css">
<script src="app/assets/lib/jquery/jquery-2.1.0.min.js" ></script>
<script src="app/assets/lib/bootstrap/dist/js/bootstrap.min.js" ></script>
<script src="app/assets/lib/angular/angular.min.js" ></script>
<script src="app/assets/lib/angular/angular-route.min.js" ></script>
<script src="app/assets/lib/angular/angular-animate.min.js" ></script>
<script src="app/assets/lib/angular/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="app/RadiosanApp.js" ></script>
</head>
<body ng-app="RadiosanApp">
<div class="container">
<div ng-controller="MainController">
<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 class="row">
<div class="col-md-6">
<a class="btn btn-info" ng-click="addSlide()">Add Slide</a>
</div>
<div class="col-md-6">
Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
<br />Enter a negative number to stop the interval.
</div>
</div>
</div>
</div>
<script src="app/controllers/MainController.js"></script>
</body>
var app =
angular.module(
"RadiosanApp", [
"ngRoute",
"ui.bootstrap",
"ngAnimate",
"RadiosanApp.Controllers.MainController"
]);
angular.module("RadiosanApp.Controllers.MainController", [])
.controller("MainController", function($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 600 + slides.length;
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();
}
});
解决方案
It's a compatibility problem between ui.bootstrap and ngAnimate .... https://github.com/angular-ui/bootstrap/issues/1350
这篇关于angularjs corousel 停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
