angularjs corousel停止工作 [英] angularjs corousel stops working
问题描述
林试图与UI的自举了angularjs旋转木马，我基本上复制/直接从角文档粘贴，和它的作品，但它停在最后的幻灯片。
它不回来了beggining，与对照组停止工作，即时没有得到在控制台上的任何错误，它只是停止工作。
＆LT;传送带间隔=myInterval＆GT;
＆LT;滑动NG重复=旋转木马中的幻灯片主动=slide.active＆GT; ＆LT; IMG类=IMG响应NG-SRC =应用程序/资产/ IMG /条/ {{slide.img}}的风格=保证金：汽车;＆GT; ＆LT; /幻灯片＆GT;
＆LT; /转盘＆GT;
编辑：我检查了一遍，它不会停止在最后一张幻灯片的工作，实际上它停在第二，不管有多少因素有
。编辑：我做了一个测试网站只是与旋转木马，仍然不能正常工作
这是整个code，它停在幻灯片2和对照组停止工作。
＆LT; HTML和GT;
＆LT; HEAD＆GT; ＆LT;标题＆GT; Radiosan网站＆LT; /标题＆GT; ＆LT;链接rel =stylesheet属性HREF =应用程序/资产/ lib中/引导/距离/ CSS / bootstrap.min.css＆GT;
＆LT;链接rel =stylesheet属性HREF =应用程序/资产/ lib中/引导/距离/ CSS /引导-theme.min.css＆GT; ＆LT;脚本SRC =应用程序/资产/ lib中/ jQuery的/ jQuery的-2.1.0.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =应用程序/资产/ lib中/引导/距离/ JS / bootstrap.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =应用程序/资产/ lib目录/角/ angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =应用程序/资产/ lib目录/角/角route.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =应用程序/资产/ lib目录/角/角animate.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =应用程序/资产/ lib目录/角/ UI的引导，第三方物流企业，0.10.0.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =应用程序/ RadiosanApp.js＆GT;＆LT; / SCRIPT＆GT;＆LT; /头＆GT;＆LT;机身NG-应用=RadiosanApp＆GT; ＆LT; DIV CLASS =容器＆GT; ＆LT; DIV NG控制器=MainController＆GT;
＆LT; DIV的风格=高度：305px＆GT;
＆LT;传送带间隔=myInterval＆GT;
＆LT;滑动NG重复=，在幻灯片幻灯片主动=slide.active＆GT;
＆LT; IMG NG-SRC ={{slide.image}}的风格=保证金：汽车;＆GT;
＆LT; DIV CLASS =旋转木马字幕＆GT;
＆LT; H4＆GT;幻灯{{$指数}}＆LT; / H4＆GT;
＆所述p为H.; {{slide.text}}＆下; / P＆GT;
＆LT; / DIV＆GT;
＆LT; /幻灯片＆GT;
＆LT; /转盘＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-6＆GT;
＆LT;一类=BTN BTN-INFONG点击=addSlide（）＆gt;添加幻灯片＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-6＆GT;
间隔时间（毫秒）：其中，INPUT TYPE =号级=表格控NG模型=myInterval＆GT;
＆LT; BR /＆GT;输入负数停止的时间间隔。
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT;脚本SRC =应用程序/控制器/ MainController.js＆GT;＆LT; / SCRIPT＆GT;＆LT; /身体GT;
VAR应用=
angular.module（
RadiosanApp，[
ngRoute
ui.bootstrap
ngAnimate
RadiosanApp.Controllers.MainController
]）;angular.module（RadiosanApp.Controllers.MainController，[]）
.controller（MainController功能（$范围）{ $ scope.myInterval = 5000;
变种幻灯片= $ scope.slides = [];
$ scope.addSlide =功能（）{
VAR newWidth = 600 + slides.length;
slides.push（{
图片：http://placekitten.com/'+ newWidth +'/ 300'
文本：['更多'，'特'，'大量的'，'剩余'] [slides.length％4] +''+
['猫'，'Kittys'，'猫科动物'，'Cutes'] [slides.length％4]
}）;
};
为（变量I = 0; I＆下; 4;我++）{
$ scope.addSlide（）;
}
}）;
这是ui.bootstrap和ngAnimate .... <一之间的兼容性问题href=\"https://github.com/angular-ui/bootstrap/issues/1350\">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屋！
