UI的旋转木马引导不会用我的角度应用合作。为什么？ [英] UI-Bootstrap Carousel won't cooperate with my Angular App. Why?

问题描述

我用尽了一切。这像什么我能得到这个该死的传送带工作。它使在来自控制器的适当的数据，但它不象一个转盘格式化 - 一切的表现和词语被堆叠在彼此的顶部。

I've tried everything. It's like nothing I do can get this damn carousel working. It's bringing in the proper data from the controller, but it doesn't format it like a carousel -- everything's showing and the words are stacked on top of each other.

下面是我的角度应用的依赖关系：

Here are my angular app dependencies:

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-重复和硬codeD中的所有数据直接导入标记这样做，箭头仍都出问题，去向后或会卡住在第二滑动。我不知道，也许有什么毛病我的依赖关系。无论如何，这是令人沮丧不能够得到这样一个简单的组成部分的工作地狱。

I just don't get it. Even when I discarded doing this with ng-repeat and hardcoded all the data directly into the markup, the arrows still were all glitchy and went backwards or would get stuck on the second slide. I don't know, maybe there's something wrong with my dependencies. Whatever the case, it's frustrating as hell not being able to get such a "simple" component working.

由于提前，

彼得

推荐答案

在的 UIB传送带的语法（注意 UIB - preFIX），一直在UI的角度，引导介绍的 0.14.0 ，但你有版本的 0.13.4 ，其中指令被命名为 转盘的，即没有preFIX。

The uib-carousel syntax (notice the uib- prefix), has been introduced in angular ui-bootstrap 0.14.0, but the version you have is 0.13.4, where the directive is named carousel, i.e. without prefix.

无论是升级到0.14，或者如果你在0.13留，删除 UIB - preFIX会做的伎俩。

Either upgrade to 0.14, or if you stay in 0.13, removing the uib- prefix will do the trick.

替换为：

    <uib-carousel ...>
        <uib-slide ...>
           <!-- ... -->
        </uib-slide>  
    </uib-carousel>

与

    <carousel ...>
        <slide ...>
           <!-- ... -->
        </slide>  
    </carousel>

作为一个侧面说明

，删除角旋转木马（JS | CSS）。从依赖关系，因为它是另一种旋转木马的解决方案，但显然你是使用用户界面 - 自举之一。

As a side note, remove angular-carousel.(js|css) from the dependencies, as it is another carousel solution, but you are obviously using the ui-bootstrap one.

这篇关于UI的旋转木马引导不会用我的角度应用合作。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！