UI-Bootstrap Carousel non collaborerà con la mia app angolare. Perché?

Question

Ho provato di tutto. È come se niente di ciò che faccio possa far funzionare questo maledetto carosello. Sta portando i dati corretti dal controller, ma non lo formattano come una giostra - tutto sta mostrando e le parole sono impilate l'una sull'altra.

Qui sono i miei angolari dipendenze app:

var app = angular.module('app', ['ngRoute', 'ui.bootstrap', 'ui.bootstrap.tpls', 'ngAnimate', 'ngTouch']) 

Ecco la mia marcatura:

<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> 

io proprio non capisco. Anche quando ho scartato l'idea con ng-repeat e ho inserito tutti i dati direttamente nel markup, le frecce erano ancora tutte gluciose e andavano indietro o si sarebbero bloccate nella seconda diapositiva. Non lo so, forse c'è qualcosa di sbagliato nelle mie dipendenze. In ogni caso, è frustrante come non riuscire a far funzionare un componente così "semplice".

Grazie in anticipo,

Peter

Answer 1

Il UIB carosello sintassi (notare il prefisso uib-), è stato introdotto in angolare ui-bootstrap 0.14.0, ma la versione che hai è 0.13.4, dove la direttiva è denominata carousel, cioè senza prefisso.

O aggiornare a 0.14, o se rimani in 0.13, rimuovere il prefisso uib- farà il trucco.

Sostituisci:

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

con:

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

Come nota a margine, rimuovere angular-carousel.(js|css) dalle dipendenze, come lo è un'altra soluzione giostra, ma si sta, ovviamente, utilizzando quello ui-bootstrap .

Answer 2

La risposta di Michael P. Bazos risolve il problema, ma non si dovrebbe andare in questo modo, perché è l'API deprecata.

Gli sviluppatori di Angular-Bootstrap hanno deciso di aggiungere un prefisso (uib) alle rispettive direttive e anche ai rispettivi controller angolari nella versione 0.14. Dal rilascio, la documentazione ufficiale contiene solo la versione con prefisso uib. Se si utilizza una vecchia versione di angular-bootstrap nel progetto, la documentazione corrente non funzionerà per ovvi motivi.

Pertanto: aggiorna il tuo avvio angolare alla versione più recente (ad oggi, 2015-10-12, è 0.14.1) e funzionerà. La soluzione di Michael è deprecata.

Answer 3

Qui potete trovare demo funzionante: https://plnkr.co/edit/PrM5PSkUHJ3l8mwXMFZQ?p=preview

Dal 30 marzo 2016 (sembra essere AngularUI 1.3.0), le direttive UIB-giostra e UIB-diapositive hanno restrict: 'A' clausola, il che significa che devono essere definiti come elemento di attributo. Questo esempio può essere trovato 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> 

Per di più, sembra che 'giostra con AngularUI' pasticcio Bootstrap giostra.