我已经尝试了一切。就像我做任何事都无法让这个该死的旋转木马工作一样。它从 Controller 中引入了正确的数据,但它并没有像轮播一样格式化它——所有的东西都在显示,单词是堆叠在一起的。
这是我的 Angular 应用依赖项:
var app = angular.module('app', ['ngRoute', 'ui.bootstrap', 'ui.bootstrap.tpls', 'ngAnimate', 'ngTouch'])
这是我的标记:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/home.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
<link rel="stylesheet" href="bower_componenets/angular-bootstrap/ui-bootstrap-csp.css">
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-carousel/dist/angular-carousel.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/homeController.js"></script>
...
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<uib-carousel class="carousel-inner" role="listbox">
<uib-slide ng-repeat="slide in slides" ng-class="{active : $first}">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h1>{{slide.headline}}</h1>
<p>{{slide.byline}} on {{slide.date}}</p>
<h3>{{slide.publication}}</h3>
</div>
</uib-slide>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" ng-non-bindable>
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" ng-non-bindable>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</uib-carousel>
</div>
我只是不明白。即使当我放弃使用 ng-repeat
执行此操作并将所有数据直接硬编码到标记中时,箭头仍然存在故障并且向后移动或卡在第二张幻灯片上。我不知道,也许我的依赖有问题。无论如何,无法让如此“简单”的组件正常工作真是令人沮丧。
提前致谢
彼得
最佳答案
uib-carousel 语法(注意 uib- 前缀)已在 angular ui 中引入-bootstrap 0.14.0,但您的版本是 0.13.4,其中指令名为 carousel ,即没有前缀。
要么升级到 0.14,要么留在 0.13,删除 uib-
前缀就可以了。
替换:
<uib-carousel ...>
<uib-slide ...>
<!-- ... -->
</uib-slide>
</uib-carousel>
与:
<carousel ...>
<slide ...>
<!-- ... -->
</slide>
</carousel>
作为旁注,从依赖项中删除 angular-carousel.(js|css)
,因为它是另一种轮播解决方案,但您显然使用的是 ui-bootstrap 解决方案。
关于html - UI-Bootstrap Carousel 不会与我的 Angular 应用程序合作。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32937014/