UI-Bootstrap 轮播无法与我的 Angular 应用合作。为什么？

Question

我什么都试过了。就像我做任何事都无法让这个该死的旋转木马工作一样。它从控制器中引入了正确的数据，但它并没有像轮播一样格式化它——所有的东西都在显示，单词是堆叠在一起的。

这是我的 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 执行此操作并将所有数据直接硬编码到标记中时，箭头仍然存在故障并且向后移动或卡在第二张幻灯片上。我不知道，也许我的依赖有问题。无论如何，无法让这样的 "simple" 组件正常工作真是令人沮丧。

提前致谢，

彼得

Answer 1

uib-carousel语法（注意uib-前缀),已在angularui-bootstrap0.14.0[=33=中引入]，但您的版本是 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。

Answer 2

Michael P. Bazos 的回答确实解决了您的问题，但您不应该那样做，因为它已被弃用 API。

Angular-Bootstrap 的开发人员决定在他们的指令和 0.14 版的 angular 控制器中添加前缀 (uib)。自发布以来，官方文档仅包含 uib 前缀版本。如果您在项目中使用旧版本的 angular-bootstrap，由于显而易见的原因，当前文档将无法使用。

因此：将您的 angular-bootstrap 更新到最新版本（截至今天，2015 年 10 月 12 日，它是 0.14.1）并且它将起作用。 Michael 的解决方案已弃用。

Answer 3

在这里您可以找到工作演示：https://plnkr.co/edit/PrM5PSkUHJ3l8mwXMFZQ?p=preview

自 2016 年 3 月 30 日起（似乎是 AngularUI 1.3.0），uib-carousel 和 uib-slide 指令具有 restrict: 'A' 子句，这意味着它们应定义为元素的属性。这个例子可以在 AngularUI homepage:

上找到

<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
    <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
        ...
    </div>
</div>

而且，您似乎把 Bootstrap' 轮播与 AngularUI' 轮播搞混了。

UI-Bootstrap 轮播无法与我的 Angular 应用合作。为什么？

UI-Bootstrap Carousel won't cooperate with my Angular App. Why?

html

dependencies

carousel

twitter-bootstrap

angularjs