UI-Bootstrap Carousel 不会与我的 Angular 应用程序合作。为啥？

Posted 2023-03-05

【中文标题】UI-Bootstrap Carousel 不会与我的 Angular 应用程序合作。为啥？

【英文标题】：UI-Bootstrap Carousel won't cooperate with my Angular App. Why?UI-Bootstrap Carousel 不会与我的 Angular 应用程序合作。为什么？

【发布时间】：2016-01-01 10:12:59

【问题描述】：

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

这是我的 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 执行此操作并将所有数据直接硬编码到标记中，箭头仍然会出现故障并向后移动，或者会卡在第二张幻灯片上。我不知道，也许我的依赖项有问题。无论如何，不​​能让这样一个“简单”的组件工作真是令人沮丧。

提前致谢，

彼得

【问题讨论】：

您是否在控制台中遇到任何错误？

@br3w5 没有...没有控制台错误

当您想使用ui-bootstrap 实现轮播时，请不要链接angular-carousel.js（因此也不要链接angular-carousel.css）。另外，如上所述，检查是否正确获取所有库。

Michael P. Bazos，好吧，我只是尝试删除不相关的依赖项，但没有运气。我相信一切都是正确的。如果不是，我想我会收到 404 错误。

顺便说一句，你应该至少有一个错误，因为你链接了bower_componenets/angular-bootstrap/ui-bootstrap-csp.css。不过，这不是轮播不工作的原因。还要检查 ui-bootstrap-tpls 是否与 ui-bootstrap 的版本相同，即 0.13.4

【参考方案1】：

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 解决方案。

【参考方案2】：

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

Angular-Bootstrap 的开发人员决定在 0.14 版中为他们的指令以及他们的 Angular 控制器添加一个前缀 (uib)。自发布以来，官方文档仅包含带有 uib 前缀的版本。如果您在项目中使用旧版本的 angular-bootstrap，则当前文档将无法正常工作。

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

【参考方案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 的轮播搞混了。

【讨论】：

今天你是我的英雄。谢谢。