ui.bootstrap.carousel沒有出現

Question

由於某些原因，我無法看到，我的Carousel不會出現。我的項目需要與defined here略有不同。它應該工作得很好，我已經概述了下面的細節。

點擊我的按鈕切換openModal，在這裏我指定我的範圍爲modal：

//Carousel Variables 
this.active = 0; 
this.currIndex = 0; 
this.slides = []; 
this.addSlide(); 

這就要求我的控制器功能addSlide：

openModal() { 
    var _this = this; 
    this.$uibModal.open({ 
     animation: true, 
     templateUrl: 'components/directives/modals/Modal/Modal.html', 
     controller: 'ModalController', 
     controllerAs: 'modal', 
     size: 'lg', 
     } 
    }); 
} 

在這個控制器我在構造函數中聲明一些變量：

addSlide() { 
for (var i=0;i<4;i++) { 
    this.slides.push({ 
    image: 'https://unsplash.it/600/300', 
    text: ['Getting Started', 'Awesome photograph', 'That is so cool', 'I love that'][this.slides.length % 4], 
    id: this.currIndex++ 
    }); 
}}; 

HTML

<div style="height: 200px;"> 
    <div uib-carousel active="modal.active" interval="0" no-wrap="false"> 
     <div uib-slide ng-repeat="slide in modal.slides" index="modal.slide.id"> 
     <img ng-src="{{modal.slide.image}}" style="margin:auto;"> 
     <div class="carousel-caption"> 
      <h4>Slide {{modal.slides.id}}</h4> 
      <p>{{modal.slides.text}}</p> 
     </div> 
     </div> 
    </div> 
    </div> 

Answer 1

更改您的標記從...

<div uib-slide ng-repeat="slide in modal.slides" index="modal.slide.id"> 
    <img ng-src="{{modal.slide.image}}" style="margin:auto;"> 
    <div class="carousel-caption"> 
     <h4>Slide {{modal.slides.id}}</h4> 
     <p>{{modal.slides.text}}</p> 
    </div> 
    </div> 

...這個...

<div uib-slide ng-repeat="slide in modal.slides" index="slide.id"> 
    <img ng-src="{{slide.image}}" style="margin:auto;"> 
    <div class="carousel-caption"> 
     <h4>Slide {{slide.id}}</h4> 
     <p>{{slide.text}}</p> 
    </div> 
    </div>"> 

通過包括modal.在那裏您引用非在控制器上存在slide屬性時，您真正需要的是引用ng-repeat中的slide對象。 （你也有slides在幾個地方，我認爲你的意思是slide）。